Skip to content
Wowza Flowplayer
/
/
Audio Track Selection
Last updated

Audio Track Selection plugin

This plugin 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>

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

In order for default_lang to have an effect, make sure your m3u8 manifest alllows autoselecting a track. For example, 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 by passing a sorting function as the asel.sort configuration option. For example, to sort by a pre-defined order in an array you might 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

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(api.asel.events.SWITCH, function() {
  console.log('Track switched, current track', api.asel.get().name)
})

Demo

Codepen

Previous page
Next page