4

i have videos with multiple audio tracks. i want to play the video and want change audio tracks from video. Is there any way to make this in html or there is html supported player for this?

Hermes
  • 2,828
  • 2
  • 14
  • 34
Vishal Upadhyay
  • 63
  • 1
  • 8

3 Answers3

0

If you want to grab the audio track from an html5 video you can get the video element by id and then use the .audioTracks array and pass in the index of the track you with to access.

var video = document.getElementById("video");

for (var i = 0; i < video.audioTracks.length; i += 1) {
  video.audioTracks[i].enabled = false;
}

MDN Docs: HTMLMediaElement.audioTracks

Furthermore, if you are looking to manipulate the audio, William provides a good answer (https://stackoverflow.com/a/15286719/6931862) using AudioContext

Below is the response provided in the link above, but with some edits to account for the updated adoption for AudioContext (used to be webkitAudioContext)

<script>

var video = document.createElement("video");
video.setAttribute("src", "ourMovie.mov");

video.controls = true;
video.autoplay = true;
document.body.appendChild(video);

var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();         // get access to audio context
var gainNode = audioCtx.createGain();
gainNode.gain.value = 1;                   // Change Gain Value to test
filter = audioCtx.createBiquadFilter();
filter.type = 2;                          // Change Filter type to test
filter.frequency.value = 5040;            // Change frequency to test

// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
  // Our <video> element will be the audio source.
  var source = audioCtx.createMediaElementSource(video); 
  source.connect(gainNode);
  gainNode.connect(filter);
  filter.connect(audioCtx.destination);

}, false);


</script>
Hermes
  • 2,828
  • 2
  • 14
  • 34
  • hello sir, thank you for reply. It works. But i cant get audioTracks things on chrome browser. is there any way that support in all browsers? – Vishal Upadhyay Jul 29 '19 at 08:31
  • @Vishal, I've updated my response to show how to use `AudioContext` (available in all browsers) to get a reference to the audio and then how to connect that back to the video element. – Hermes Jul 29 '19 at 20:37
  • Hello Sir, I got your response and it is working on all browser. i can see audio details on script. but i want to enable option on video player to change audio tracks. like you can check multiple audio tracks video on safari or internet explorer. when the video have multiple audio then video player shows an option to change audio tracks except in chrome and firefox browser , i want to enable it. Please help me on this. Thank You – Vishal Upadhyay Aug 01 '19 at 12:23
  • For that sort of functionality I have not seen default UI elements, the only examples i've seen use `audioTracks` which is not universally supported. I think you will most likely have to have your own button that runs some JS to handle switching of the audio resource for the video element. – Hermes Aug 01 '19 at 20:14
0

There is an API for it, but it's not very supported. However, there is a plugin for video.js called videojs-audio-tracks, but it still uses the audioTracks API, which isn't supported by Chrome, and needs manual enabling in Firefox.

Elijah Ciali
  • 41
  • 8
  • hello sir, thank you for reply. It works. But i cant get audioTracks things on chrome browser. is there any way that support in all browsers? – Vishal Upadhyay Jul 29 '19 at 08:31
  • As mentioned in my answer, this seems to be the only API that allows for this. It is not available in the Chrome browser, as also stated in my answer. – Elijah Ciali Jul 29 '19 at 17:15
0

You should use the answer suggested by Hermes:

var video = document.getElementById("video");

for (var i = 0; i < video.audioTracks.length; i += 1) {
      video.audioTracks[i].enabled = false;
}

But in chrome for this to work you must enable the "Experimental Web Platform features" that you will find on chrome://flags/

Impresi MLine
  • 52
  • 4