Multi-audio

To test this feature and view the example code, please see the Browsers SDK 1 Example Code Quick Start guide.

The browser SDK includes built-in multi-audio support.

Multi-audio here refers to multiple language support only, not to multiple audio bitrates.

Where multiple language tracks are present for a chosen piece of content, they will be added automatically to the player instance. If the player control bar is used, selection and deselection will be available via the audio-selection icon in the control bar.

Taking control

Several events and API calls enable the application to take control of audio tracks; for details see https://html.spec.whatwg.org/multipage/media.html#audiotracklist.

Getting the list of audio tracks

The player assumes an instance of otvplayer.

player.audioTracks(); returns an AudioTrackList of any AudioTrack objects. For more information, see:

Enabling an audio track

Enabling the desired track is done by switching the enabled flag to true on the required AudioTrack item in the AudioTrackList array, and false to the corresponding track to be deactivated. A change event is fired when a track is enabled or disabled. There will always be a valid audio track playing at any time, even if all track values are disabled.

JS

let myaudiotracks = player.audioTracks(); // assume 2 tracks, first is selected

// set up a listener for the ‘change’ event on the AudioTrackList object
myaudiotracks.addEventListener('change', function() {
  console.log("Change event detected");
});

myaudiotracks[0].enabled = false; // sets enabled to false, but continues to play audio
myaudiotracks[1].enabled = true; // changes audio to the second track

The SDK still handles the addition of the language tracks from the source content, so the following API methods are supplied for completeness:

player.audioTracks().addTrack(AudioTrack) adds an existing AudioTrack to the player's internal list of AudioTracks. The addtrack event is fired when a track is added to an AudioTrackList.
player.audioTracks().removeTrack(AudioTrack) removes a track from the AudioTrackList currently on the player; if no track exists, this will do nothing. The removetrack event is fired when a track is removed from an AudioTrackList.

Keeping track of the changes

Three callbacks on the AudioTrackList help keep track of when audio tracks are added or removed:

onaddtrack handler is sent a TrackEvent object which indicates in its track property which audio track has been added to the media.
onremovetrack handler is sent a TrackEvent object which indicates in its track property which audio track has been removed from the media.
onchange handler is passed an event in the form of an Event object; the event does not provide any additional information. To determine the new state of media tracks, you will have to look at their AudioTrack.enabled flags.

Three associated events: addtrack, removetrack and change can be listened for:

JS

let myAudioTracks = player.audioTracks();
myAudioTracks.onaddtrack = updateTrackCount;
myAudioTracks.onremovetrack = updateTrackCount;
myAudioTracks.onchange = updateTrackCount;

function updateTrackCount(event) {
  trackCount = myAudioTracks.length;
  // or however you want to handle this
}

myAudioTracks.addEventListener('change', (event) => {
    console.log(`'${event.type}' event fired`);
});