Example Sequencer (multi-device)

• Sequencer Background
• Sequencer API
• Sequencer Usage

The Sequencer provides enter and exit events based on a moving point. This moving point is implemented and controlled by a timing object. Sequencer events is used to control styling (red color).

Demo Tips

• open this page on multiple devices (or at least multiple browser tabs) (simultaneously) to verify multi-device timing.
• the timing provider is shared globally, so others might be playing with demo too…
• try reloading the demo on one device/tab while the demo is running on others.

Demo

Timing Object position

Play Pause Reset Backwards

JavaScript

// Timing Object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});

// Sequencer
var s = new TIMINGSRC.Sequencer(to);

// Load data
var r = s.request();
Object.keys(data).forEach(function (key) {
	r.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
r.submit();

// Register Handlers
s.on("change", function (e) {
  var el =  document.getElementById(e.key);
  el.classList.add("active");
});
s.on("remove", function (e) {
  var el = document.getElementById(e.key);
  el.classList.remove("active");
});