Playing audio sprites with the track element

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.

How it works

An Audio object is created for animalSounds.mp3, which is made up of multiple different sounds: purr, woof, and so on.

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