Home HelloWorld! Doc API Examples GitHub

Example Sequencer (page-local)

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

Timing Object position

JavaScript

// Timing Object
var to = new TIMINGSRC.TimingObject({range:[0,52]});

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

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

// 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");
});