This demo requires a browser such as Google Chrome Canary that supports the track element.
In Chrome you must enable track element support on the chrome://flags page.
An Audio object is created for animalSounds.mp3, which is made up of multiple different sounds: purr, woof, and so on.
TextTrack is then constructed with a TextTrackCue added for each sound. Each cue has a startTime, an endTime and an ID.
When a button is clicked, a cue with the same ID as the button is found using the
getCueById() method. The Audio object
currentTime is set to the startTime of the cue. A
timeupdate event listener stops play at the
endTime of the cue.
This demo is based on a code example in the W3C TextTrack API documentation.
For more information about the track element, take a look at Getting started with the track element on HTML5 Rocks.