Audio track selection

The Flowplayer Native audio track selection plugin (asel) adds a selection menu for multiple audio tracks in HLS or DASH streams.

Prerequisites

• The HLS plugin or DASH plugin
• An HLS or DASH media source with multiple separate audio tracks in the manifest

Installation

Load the audio selection plugin next to the core player and the HLS plugin or the DASH plugin.

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<!-- or
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/dash.min.js"></script>
-->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/asel.min.js"></script>

OVP managed player

To enable the plugin in an OVP JavaScript (ESM) embed, import the plugin's ESM module after the embed module and register it with flowplayer(asel) before you create the player:

<div id="player-<media id>"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/<player id>/<media id>.js";
  import asel from "https://cdn.flowplayer.com/releases/native/3/stable/esm/plugins/asel.min.js";

  flowplayer(asel);
  flowplayer("#player-<media id>", {});
</script>

Load the plugin from the same release channel or version as the player. In legacy async embeds, add "asel" to the "plugins": [] array instead.

Configuration (optional)

You can configure the plugin with top level configuration option asel.

The configuration option can either be false which disables audio selection or a configuration object with properties:

• default_lang - a string containing the desired default language. Has to match an existing language attribute in the HLS manifest

• sort - a sorting function to control the order of the items in the menu. Signature (a: object, b: object) => number.

  In order for default_lang to have an effect, make sure your m3u8 manifest does allow autoselecting a track, i.e. the tag for the audio should look like #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio_0",CHANNELS="1",NAME="English",LANGUAGE="en",DEFAULT=NO,AUTOSELECT=YES,URI="somemanifest.m3u8" AUTOSELECT=NO will prevent the parameter from working.

Sorting

You can control in which order the items will be rendered into the menu with passing a sorting function as the asel.sort configuration option.

For example to sort by a pre-defined order in an array you could use the following function

function sort_by_lang(order) {
  return function(a, b) {
    return order.indexOf(a.lang) - order.indexOf(b.lang)
  }
}

Configured with

{ 
  // Other player configuration
  asel: {
    sort: sort_by_lang(["en", "es"])
  }

}

API

The plugin API is available as player.asel. It is undefined if the plugin is disabled with asel: false.

Properties and methods:

• asel.tracks - A list of the audio tracks of the stream. Track properties are parsed from the HLS manifest:
  • id
  • autoselect
  • default
  • lang
  • name
• asel.get(index) - function that returns the audio track at the given index (index refers to the index in the asel.tracks array)
• asel.set(index) - function for changing the current audio track (index refers to the index in the asel.tracks array)

Events (available on the plugin as flowplayer.asel.events):

• SET - When a track is being selected. The event detail is the selected track.
• SWITCH - When audio track is switched
• TRACKS - When tracks are parsed from the manifest and available. The event detail is the array of tracks.

Sample code

var api = flowplayer('#container', {
  src: "https://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/ElephantsDream.smil/playlist.m3u8",
  asel: {
    default_lang: 'es'
  }
})

api.on(flowplayer.asel.events.TRACKS, function() {
  console.log('Available tracks', api.asel.tracks)
})

api.on(flowplayer.asel.events.SWITCH, function() {
  console.log('Track switched, first track:', api.asel.get(0).name)
})

// Switch to the second audio track once tracks are available
api.once(flowplayer.asel.events.TRACKS, function() {
  if (api.asel.tracks.length > 1) {
    api.asel.set(1)
  }
})

Demo

Codepen