CODEWITHSUNDEEP
javascripthtmlapiaudiovideo
user3407584
user3407584

Reputation: 81

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 is set for both video tags. When I want to get video1 audio, I would like to get it audio source and assign it to the audio tag. Also do the same for video2.

Is this possible with Javascript? I have tried Web audio API but I'm lost. Please help.

Upvotes: 7

Views: 7677

Answers (1)

Kaiido
Kaiido

Reputation: 137141

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 : 

<audio src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls autoplay></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 = new AudioContext();
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;}
<button id="btn_1">listen</button><br>
<video id="vid" crossOrigin='anonymous' src="http://vjs.zencdn.net/v/oceans.mp4" loop autoplay></video>

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

Upvotes: 6

Related Questions