Get Audio From Html5 Video

I have been trying to figure out this for a week. I have two completely different video tags with their respective audio. I also have one audio tag. At first, both muted attribute

Solution 1:

I am not sure I get what you want.

To copy the video's audio stream to an audio element, you could simply set the src of the <audio> element to the video's src :

<audiosrc="http://media.w3.org/2010/05/sintel/trailer.mp4"controlsautoplay></audio>

Then you could try to sync it with your video tag's currentTime, or sync the video's currentTime with the <audio>'s one and unmute the video, while the audio would be muted, but I'm not sure you'll get awesome results. Also, it won't be a surprise if some browsers will load the video twice in the same time.

---

Now, what can you do with the WebAudioAPI :

It would be really hard to make your audio streams into the audio tags, live and in a cross-browser way.

If you don't need this however, it's pretty easy to create some MediaSource from video elements thanks to the createMediaElementSource() method.

Once these MediaSource objects are created, your original media will be disconnected from the normal output. You need to keep their muted attribute unset or set to false in order to hear it as a MediaSource object.

Here is a simple example that will allow you to mute/unmute a video source, from the WebAudioAPI only :

var vid = document.getElementById('vid');

var audioCtx = newAudioContext();
var gainNode = audioCtx.createGain();
var v1_src = audioCtx.createMediaElementSource(vid);

gainNode.connect(audioCtx.destination);

btn_1.onclick = function() {
  var playing = this.textContent.indexOf('listen') < 0;
  if (playing) {
    v1_src.disconnect();
    this.textContent = this.textContent.replace('mute', 'listen');
  } else {
    v1_src.connect(gainNode);
    this.textContent = this.textContent.replace('listen', 'mute');
  }
}

video {  height: 120px;}

<buttonid="btn_1">listen</button><br><videoid="vid"crossOrigin='anonymous'src="http://vjs.zencdn.net/v/oceans.mp4"loopautoplay></video>

Note that the media passed to this method must come from a safe domain request (see CORS).