Support multiple audio tracks playback

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ovenplayer",
-  "version": "0.10.25",
+  "version": "0.10.26",
   "description": "OvenPlayer is Open-Source HTML5 Player. OvenPlayer supports WebRTC Signaling from OvenMediaEngine for Sub-Second Latency Streaming.",
   "main": "dist/ovenplayer.js",
   "scripts": {

src/js/api/Api.js

@@ -469,6 +469,34 @@ const Api = function (container) {
 
         return currentProvider.setCurrentQuality(qualityIndex);
     };
+
+    that.getAudioTracks = () => {
+        if (!currentProvider) {
+            return null;
+        }
+
+        OvenPlayerConsole.log("API : getAudioTracks() ", currentProvider.getAudioTracks());
+        return currentProvider.getAudioTracks();
+    };
+
+    that.getCurrentAudioTrack = () => {
+        if (!currentProvider) {
+            return null;
+        }
+
+        OvenPlayerConsole.log("API : getCurrentAudioTrack() ", currentProvider.getCurrentAudioTrack());
+        return currentProvider.getCurrentAudioTrack();
+    };
+
+    that.setCurrentAudioTrack = (audioTrackIndex) => {
+        if (!currentProvider) {
+            return null;
+        }
+
+        OvenPlayerConsole.log("API : setCurrentAudioTrack() ", audioTrackIndex);
+        return currentProvider.setCurrentAudioTrack(audioTrackIndex);
+    };
+
     that.isAutoQuality = () => {
         if (!currentProvider) {
             return null;

src/js/api/constants.js

@@ -73,6 +73,7 @@ export const CONTENT_CAPTION_CUE_CHANGED = "cueChanged";
 export const CONTENT_CAPTION_CHANGED = "captionChanged";
 export const CONTENT_TIME_MODE_CHANGED = "timeDisplayModeChanged";
 export const OME_P2P_MODE = "p2pMode";
+export const AUDIO_TRACK_CHANGED = "audioTrackChanged";
 
 
 export const AD_CLIENT_GOOGLEIMA = "googleima";
@@ -134,6 +135,7 @@ export const SYSTEM_TEXT = [
                 "speedUnit" : "x",
                 "source" : "Source",
                 "quality" : "Quality",
+                "audioTrack" : "Audio",
                 "caption" : "Caption",
                 "display" : "Display"
             }
@@ -287,6 +289,7 @@ export const SYSTEM_TEXT = [
                 "speedUnit" : "x",
                 "source" : "소스",
                 "quality" : "품질",
+                "audioTrack" : "오디오",
                 "caption" : "자막",
                 "display" : "표시"
             }
@@ -440,6 +443,7 @@ export const SYSTEM_TEXT = [
                 "speedUnit" : "x",
                 "source" : "Źrodło",
                 "quality" : "Jakość",
+                "audioTrack" : "Audio",
                 "caption" : "Podtytuł",
                 "display" : "Wyświetlacz"
             }

src/js/api/provider/html5/Provider.js

@@ -451,6 +451,25 @@ const Provider = function (spec, playerConfig, onExtendedLoad) {
     that.setCurrentQuality = (qualityIndex) => {
         //Do nothing
     };
+
+    that.getAudioTracks = () => {
+        if (!elVideo) {
+            return [];
+        }
+        return spec.audioTracks;
+    };
+
+    that.getCurrentAudioTrack = () => {
+        if (!elVideo) {
+            return [];
+        }
+        return spec.currentAudioTrack;
+    };
+
+    that.setCurrentAudioTrack = (audioTrackIndex) => {
+        //Do nothing
+    };
+
     that.isAutoQuality = () => {
         //Do nothing
     };

src/js/api/provider/html5/providers/Hls.js

@@ -13,7 +13,7 @@ import {
     PLAYER_UNKNWON_NETWORK_ERROR,
     PLAYER_BAD_REQUEST_ERROR,
     PLAYER_AUTH_FAILED_ERROR,
-    PLAYER_NOT_ACCEPTABLE_ERROR, STATE_PLAYING, CONTENT_LEVEL_CHANGED
+    PLAYER_NOT_ACCEPTABLE_ERROR, STATE_PLAYING, CONTENT_LEVEL_CHANGED, AUDIO_TRACK_CHANGED
 } from "api/constants";
 
 import sizeHumanizer from "utils/sizeHumanizer";
@@ -69,8 +69,10 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
             dvrWindow: 0,
             framerate: 0,
             currentQuality: -1,
-            currentSource: -1,
             qualityLevels: [],
+            currentAudioTrack: -1,
+            audioTracks: [],
+            currentSource: -1,
             sources: [],
             adTagUrl: adTagUrl
         };
@@ -102,6 +104,19 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
 
                 spec.currentQuality = hls.firstLevel;
 
+                for (let i = 0; i < hls.audioTracks.length; i++) {
+
+                    let audioTrack = hls.audioTracks[i];
+
+                    spec.audioTracks.push({
+                        index: audioTrack.id,
+                        label: audioTrack.name
+                    });
+
+                    if (audioTrack.default === true) {
+                        spec.currentAudioTrack = audioTrack.id;
+                    }
+                }
             });
 
             hls.once(Hls.Events.LEVEL_LOADED, function (event, data) {
@@ -134,6 +149,14 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
                 });
             });
 
+            hls.on(Hls.Events.AUDIO_TRACK_SWITCHED , function (event, data) {
+
+                spec.currentAudioTrack = data.id;
+                that.trigger(AUDIO_TRACK_CHANGED, {
+                    currentAudioTrack: spec.currentAudioTrack
+                });
+            });
+
             hls.on(Hls.Events.LEVEL_UPDATED, function (event, data) {
                 if (data && data.details) {
                     spec.dvrWindow = data.details.totalduration;
@@ -223,6 +246,13 @@ const HlsProvider = function (element, playerConfig, adTagUrl) {
             }
         };
 
+        that.setCurrentAudioTrack = (audioTrackIndex) => {
+            hls.audioTrack = audioTrackIndex;
+            spec.currentAudioTrack = audioTrackIndex;
+
+            return spec.currentAudioTrack;
+        };
+
         that.getDuration = () => {
             return element.duration;
         }

src/js/api/provider/html5/providers/Html5.js

@@ -26,8 +26,10 @@ const Html5 = function(element, playerConfig, adTagUrl){
         buffer : 0,
         framerate : 0,
         currentQuality : -1,
-        currentSource : -1,
         qualityLevels : [],
+        currentAudioTrack: -1,
+        audioTracks: [],
+        currentSource : -1,
         sources : [],
         adTagUrl : adTagUrl
     };

src/js/view/components/controls/settingButton.js

@@ -9,28 +9,29 @@ import {
 } from "api/constants";
 
 let PANEL_TITLE = {
-    "speed" : "Speed",
-    "speedUnit" : "x",
-    "source" : "Source",
-    "quality" : "Quality",
-    "caption" : "Caption",
-    "display" : "Display"
+    "speed": "Speed",
+    "speedUnit": "x",
+    "source": "Source",
+    "quality": "Quality",
+    "audioTrack": "Audio",
+    "caption": "Caption",
+    "display": "Display"
 };
 const SettingButton = function ($container, api) {
     let panelManager = PanelManager();
 
-     function generateMainData(api){
+    function generateMainData(api) {
         let panel = {
-            id : "panel-"+new Date().getTime(),
-            title : "Settings",
-            body : [],
-            isRoot : true,
-            panelType : ""
+            id: "panel-" + new Date().getTime(),
+            title: "Settings",
+            body: [],
+            isRoot: true,
+            panelType: ""
         };
 
         let playerConfig = api.getConfig();
 
-        if(playerConfig && playerConfig.systemText){
+        if (playerConfig && playerConfig.systemText) {
             Object.keys(PANEL_TITLE).forEach(title => {
                 PANEL_TITLE[title] = playerConfig.systemText.ui.setting[title];
             });
@@ -42,64 +43,81 @@ const SettingButton = function ($container, api) {
         let qualityLevels = api.getQualityLevels();
         let currentQuality = qualityLevels && qualityLevels.length > 0 ? qualityLevels[api.getCurrentQuality()] : null;
 
+        let audioTracks = api.getAudioTracks();
+        let currentAudioTrack = audioTracks && audioTracks.length > 0 ? audioTracks[api.getCurrentAudioTrack()] : null;
+
         let captions = api.getCaptionList();
         let currentCaption = api.getCurrentCaption();
 
         let framerate = api.getFramerate();
 
-        if(api.getDuration() !== Infinity && currentSource && currentSource.type !== PROVIDER_RTMP){
+        if (api.getDuration() !== Infinity && currentSource && currentSource.type !== PROVIDER_RTMP) {
             let body = {
-                title : PANEL_TITLE.speed,
-                value :  api.getPlaybackRate() + PANEL_TITLE.speedUnit,
-                description :  api.getPlaybackRate() + PANEL_TITLE.speedUnit,
-                panelType : "speed",
-                hasNext : true
+                title: PANEL_TITLE.speed,
+                value: api.getPlaybackRate() + PANEL_TITLE.speedUnit,
+                description: api.getPlaybackRate() + PANEL_TITLE.speedUnit,
+                panelType: "speed",
+                hasNext: true
             };
             panel.body.push(body);
         }
-        if (sources && sources.length > 0) {
+        if (sources && sources.length > 1) {
 
             let body = {
-                title : PANEL_TITLE.source,
-                value : currentSource ? currentSource.label : "Default",
-                description : currentSource ? currentSource.label : "Default",
-                panelType : "source",
-                hasNext : true
+                title: PANEL_TITLE.source,
+                value: currentSource ? currentSource.label : "Default",
+                description: currentSource ? currentSource.label : "Default",
+                panelType: "source",
+                hasNext: true
             };
 
             panel.body.push(body);
         }
         if (qualityLevels && qualityLevels.length > 0) {
 
             let body = {
-                title : PANEL_TITLE.quality,
-                value : currentQuality ? currentQuality.label : "Default",
-                description : currentQuality ? currentQuality.label : "Default",
-                panelType : "quality",
-                hasNext : true
+                title: PANEL_TITLE.quality,
+                value: currentQuality ? currentQuality.label : "Default",
+                description: currentQuality ? currentQuality.label : "Default",
+                panelType: "quality",
+                hasNext: true
+            };
+
+            panel.body.push(body);
+        }
+
+        if (audioTracks && audioTracks.length > 0) {
+
+            let body = {
+                title: PANEL_TITLE.audioTrack,
+                value: currentAudioTrack ? currentAudioTrack.label : "Default",
+                description: currentAudioTrack ? currentAudioTrack.label : "Default",
+                panelType: "audioTrack",
+                hasNext: true
             };
 
             panel.body.push(body);
         }
+
         if (captions && captions.length > 0) {
 
             let body = {
-                title : PANEL_TITLE.caption,
-                value : captions[currentCaption] ? captions[currentCaption].label : "OFF",
-                description : captions[currentCaption] ? captions[currentCaption].label : "OFF",
-                panelType : "caption",
-                hasNext : true
+                title: PANEL_TITLE.caption,
+                value: captions[currentCaption] ? captions[currentCaption].label : "OFF",
+                description: captions[currentCaption] ? captions[currentCaption].label : "OFF",
+                panelType: "caption",
+                hasNext: true
             };
 
             panel.body.push(body);
         }
-        if(framerate > 0){
+        if (framerate > 0) {
             let body = {
-                title : PANEL_TITLE.display,
-                value : api.isTimecodeMode() ? "Play time" : "Framecode",
-                description : api.isTimecodeMode() ? "Play time" : "Framecode",
-                panelType : "display",
-                hasNext : true
+                title: PANEL_TITLE.display,
+                value: api.isTimecodeMode() ? "Play time" : "Framecode",
+                description: api.isTimecodeMode() ? "Play time" : "Framecode",
+                panelType: "display",
+                hasNext: true
             };
 
             panel.body.push(body);
@@ -108,26 +126,25 @@ const SettingButton = function ($container, api) {
         return panel;
     };
 
-    const onRendered = function($current, template){
+    const onRendered = function ($current, template) {
     };
-    const onDestroyed = function(template){
+    const onDestroyed = function (template) {
     };
     const events = {
-        "click .op-setting-button" : function(event, $current, template){
+        "click .op-setting-button": function (event, $current, template) {
             event.preventDefault();
             let $parent = $current.closest(".op-controls-container");
-            if(panelManager.size() > 0){
+            if (panelManager.size() > 0) {
                 panelManager.clear();
-            }else{
+            } else {
                 let panelData = generateMainData(api);
                 panelManager.add(Panels($parent, api, panelData));
             }
         },
     };
 
-    return OvenTemplate($container, "SettingButton", api.getConfig(), null, events, onRendered, onDestroyed );
+    return OvenTemplate($container, "SettingButton", api.getConfig(), null, events, onRendered, onDestroyed);
 };
 
 
-
 export default SettingButton;