Add control for audio tracks (for streaming libraries and possibly external audio files)

[mrinv3301]

I've video with different translates. How can I choose between different vioce-overs, like I can do that with subtitles?

[friday]

It's not supported in HTML5 video, but the streaming libraries can do it. https://github.com/sampotts/plyr/wiki/FAQ#1-does-plyr-work-with--

[friday]

Changed to a feature since it would be nice with a control for it in cases where it's supported. This is not a high prio however, and it's a long way to go.

[SsgtS7ARK]

This feature would be greatly appreciated. I need to have a youtube live stream on my website with a different audio track/voiceover. I believe this would be the first player to support such feature. Thanks

[masterofthesith]

This is most important hls setting in any player. For this reason most people have to use jwplayer. I want to use and support this player but our all items has mutl audio settings.

If ur ideas will change any time about multi audio menu support, i will be using and supporting this project in out systems.

[VAIBHAV7500]

Any update on this?

[denilly]

Good evening, are there any plans to implement the multi-track audio feature? Especially important in content with simultaneous translation. Thanks.

[tobiasgoecke]

+1

[brahimaz]

Any update on this?

[maxmag-soft]

Any update on this?

[aolko]

Updates?

[ThBastos]

+1

[andreapola]

+1

[alexkuzmin]

+1

[frankykubo]

If anyone is interested, I managed to implement a simple interface that will add the audio tracks to settings. I used @Ponywka 's PR and added support for basic HTML5 video. The changing track itself in settings does not change media that is played (until you are not using DASH) but you are able to add onChange function as with quality and implement changing media track yourself (for example with HLS.js).

Available as npm i @antik-web/plyr

All you need to do is add these to plyr's config:

new Plyr(videoHtmlElement, {
    audioTrack: {
        options: ['sk', 'en', 'us'] // array of strings,
        selected: 'sk',
        onChange: (e: any) => updateAudio(e), // e is value of the selected label (string)
        showUnrecognizedLabel: true, // if you want to show 'Unrecognized (en)' (if not defined in i18n) instead of 'en'
    },
    i18n: {
        'audioTrack': 'Language',
        audioTrackLabel: {
            'en': 'English'
        }
    }
});

[flixadmin]

@frankykubo Can you provide me the script please? I'm not familiar with npm or node.js. I'm using plyr in html only. So I need the script file. Thanks in Advance!

[frankykubo]

@frankykubo Can you provide me the script please? I'm not familiar with npm or node.js. I'm using plyr in html only. So I need the script file. Thanks in Advance!

You can download artifacts HERE. I tested it only in Vue using JS, but I hope you can make it work your way too! Good lock.

[flixadmin]

@frankykubo Is'nt The Provided Release is same as the Your Modified repo? Maybe I didn't make it clear. I want something like: <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script> This. The Plyr.Plyfilled.js file which can be directly run in browser.

[frankykubo]

@flixadmin I don't have it on any CDN. You have to download build-artifacts.zip and then open the ZIP, get the file you need (in your case plyr.polyfilled.js and store it on your web's. Then, you can use it as <script src="your-web-location/plyr.polyfilled.js"></script>.

[flixadmin]

Thanks a lot! I found it. I'm putting a like to the file here for anyone who needs it: https://gist.github.com/flixadmin/8052ef992a44543596129886a89dbe9a

[Ponywka]

@flixadmin GitHub Pages may be better

[micaelsgarcez]

If anyone is interested, I managed to implement a simple interface that will add the audio tracks to settings. I used @Ponywka 's PR and added support for basic HTML5 video. The changing track itself in settings does not change media that is played (until you are not using DASH) but you are able to add onChange function as with quality and implement changing media track yourself (for example with HLS.js).

Available as npm i @antik-web/plyr

All you need to do is add these to plyr's config:

new Plyr(videoHtmlElement, {
    audioTrack: {
        options: ['sk', 'en', 'us'] // array of strings,
        selected: 'sk',
        onChange: (e: any) => updateAudio(e), // e is value of the selected label (string)
        showUnrecognizedLabel: true, // if you want to show 'Unrecognized (en)' (if not defined in i18n) instead of 'en'
    },
    i18n: {
        'audioTrack': 'Language',
        audioTrackLabel: {
            'en': 'English'
        }
    }
});

I have video and audio in separate .mp4 files. I haven't found a way to easily synchronize them with the player. Is it possible to do this with this fork?

[Ponywka]

I have video and audio in separate .mp4 files. I haven't found a way to easily synchronize them with the player. Is it possible to do this with this fork?

@micaelsgarcez I used something like you want before in my own video-player. That's not good idea. It works a little bit ugly. The better way it's concat your videos via mkvdemux or ffmpeg on one file or use MPEG-DASH. https://github.com/Ponywka/Multitrack.JS/blob/a8e09ef0e030741096ff37f2ca20e9888307af1e/src/internal/playback.js#L1-L46 (example in use you can got here: https://магиядружбы.рф/%D1%81%D1%82%D0%B0%D1%84%D1%84/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE/MLP-ANG/)

[izogfif]

I have video and audio in separate .mp4 files. I haven't found a way to easily synchronize them with the player. Is it possible to do this with this fork?

This fork only provides audio track switching interface. You need to feed data of audio and video tracks to player using third-party library. For example, you can extract (demux) chunks of video and audio (for example, using ffmpeg.wasm), then feed them to HLS.js or similar muxing framework that can piece individual video and audio chunks together and playback the result via MediaSource's SourceBuffer API.