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.

Copy

Copied

<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:

Copy

Copied

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

Configured with:

Copy

Copied

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

}

API

Properties:

tracks - A list of audio tracks for the stream. Track properties are parsed from the 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

Copy

Copied

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