Quickstart¶
This quickstart tutorial demonstrates playback of any kind of timed data.
Step 1 : Create a Webpage¶
Setup a webpage and initialise key timingsrc concepts:
- Timing Object for playback control
- Dataset for cue management
- Sequencer for cue playback
<!DOCTYPE html>
<html>
<head>
<script type="module">
import {TimingObject, Dataset, Sequencer, Interval} from "https://webtiming.github.io/timingsrc/lib/timingsrc-module-v3.js";
const to = new TimingObject();
const ds = new Dataset();
const activeCues = new Sequencer(ds, to);
...
</script>
</head>
<body>
<div id="cues"></div>
...
</body>
</html>
Also, unless the timing object is to be remote controlled by an external timing object, the webpage needs to define some playback controls, for instance see: Basic Timing Object Controls.
Step 2 : Load cues¶
There are no restrictions regarding data format or data source. As long as data can be made available within the webpage, it can be used in timed presentation. In this example, we will simply use som mock data.
// mockup timed data
const data = [
{id:"a", text: 'A', start: 0, end: 1 },
{id:"b", text: 'B', start: 2, end: 3 },
{id:"c", text: 'C', start: 4, end: 5 },
{id:"d", text: 'D', start: 6, end: 7 },
{id:"e", text: 'E', start: 8, end: 9 },
...
];
// make cues
const cues = data.map(item => {
return {
key: item.id,
interval: new Interval(item.start, item.end),
data: item
};
});
// load into dataset
ds.update(cues);
Step 3 : Render dataset cues¶
In this example the dataset is assumed to be static. If the dataset is dynamic, use change, remove events to keep the visualization up to date.
// construct a list from dataset cues
document.getElementById("cues").innerHTML = [...ds.values()]
.map(function(cue){
let text = JSON.stringify(cue.data);
if (activeCues.has(cue.key)) {
return `<div id=${cue.key} class="active">${text}</div>`;
} else {
return `<div id=${cue.key}>${text}</div>`;
}
})
.join("\n");
Step 4 : Render active cues¶
Finally, render active cues by specifying what happens when:
- an inactive cue becomes active
- an active cue becomes inactive
In this example, this is done simply by setting or removing the css classname active on cue list elements.
activeCues.on("change", (eArg, eInfo) => {
let el = document.getElementById(eArg.key);
if (el) {
el.classList.add("active");
}
});
activeCues.on("remove", (eArg, eInfo) => {
let el = document.getElementById(eArg.key);
if (el) {
el.classList.remove("active");
}
});
Ready¶
Ready to load the page and start controlling the timing object.