Timeline Player

A component to integrate into your app. Displays timelines and syncs with your audio player.

Available soon for iOS, Android and web/JavaScript.

Example

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.

Initializing

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);
      

Timeline Controller

TimelineController facilitates communication between TimelinePlayer and the rest of your app.

Synchronizing clocks

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...

TimelineController.setClock(time);
      

When the audio player starts playback...

TimelineController.startPlayback();

      

When the audio player stops or pauses playback...

TimelineController.stopPlayback();

      

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

      

Your app also needs to listen for changes to the clock initiated by user interaction with TimelinePlayer. For that, TimelineController broadcasts events (NSNotificationCenter on iOS, LocalBroadcastManager on Android, JavaScript events for web apps)

There's only one event to worry about: timelineClockChange.

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.

Settings

wordHighlighting (boolean)

Player highlights each word as it is spoken

shareButton (boolean)

Enables share button on each paragraph, chapter heading, image, etc.

interval (integer)

Set the granularity of the TimelinePlayer's clock, in milliseconds.