Audio Selection

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/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>
<!-- or
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>
-->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/asel.min.js"></script>

Async cloud player installation

To enable the plugin in the async cloud player, declare it in the "plugins": [] config object with asel .

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 alllow autoselecting a track, ie 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 Audio selection JS API lives under asel namespace in the player API.

Properties:

• tracks - A list of audio tracks for the stream. Track properties are parsed from HLS manifest:
  • id
  • audioCodec
  • autoselect
  • default
  • lang
  • name
  • url
• get() - function that returns the current track
• set(index) - function for changing the current track (index refers to the index in the tracks array)
• events - A list of events that can be listened to
  • SET - When a track is being selected
  • SWITCH - When audio track is switched
  • TRACKS - When tracks are parsed from the manifest and available

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