Change Audio From Multple Audio Tracks Video

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

Solution 1:

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.

Solution 2:

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);

varAudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = newAudioContext();         // get access to audio contextvar 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/112368window.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>

Solution 3:

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/