A component to integrate into your app. Displays timelines and syncs with your audio player.
How it works
Timeline Player component integrates into an existing audio player app. It displays timelines in-sync with audio. We also have an editor tool that lets content producers make timelines. There's a customizable view that displays annotations and transcripts on a timeline.
The display is customized with CSS. The annotations are fed in with Timeline JSON.
// Load CSS style TimelineController.loadCSS(pathToCSS); // Load JSON annotations TimelineController.loadJSON(pathToJSON);
TimelineController facilitates communication between TimelinePlayer and the rest of your app.
Timeline Player has its own clock which should be kept in sync with the audio player's clock.
When the audio player jumps its clock to a new time...
When the audio player starts playback...
When the audio player stops or pauses playback...
When the audio player skips or scrubs ahead...
// Move playhead on TimelinePlayer to new location TimelineController.setTime(time); // Resume playback TimelineController.startPlayback();
If your app wants to know TimelinePlayer's current time...
TimelineController.currentTime(); // Returns TimelinePlayer's clock time
There's only one event to worry about:
timelineClockChange is fired when the user clicks something that is meant to jump to a different location in the audio. At that point, your app will need to update its audio player's clock so that it stays in sync.
Player highlights each word as it is spoken
Enables share button on each paragraph, chapter heading, image, etc.
Set the granularity of the TimelinePlayer's clock, in milliseconds.