从HTML5视频中获取音频 [英] Get audio from HTML5 video

问题描述

我一直想弄清楚这一周。
我有两个完全不同的视频标签及其各自的音频。我也有一个音频标签。首先，两个视频标签都设置了静音属性。当我想获得video1音频时，我想获得它的音频源并将其分配给音频标签。也为video2做同样的事情。

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.

Javascript可以实现吗？我试过Web音频API，但我迷路了。请帮帮忙。

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

推荐答案

我不确定自己能得到什么。

I am not sure I get what you want.

要将视频的音频流复制到音频元素，您只需设置< audio> 视频src的元素：

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>

然后你可以尝试将它与你的视频标签的 currentTime 同步，或者将视频的 currentTime 与< 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.

现在，您可以使用WebAudioAPI做什么：

将音频流转换为音频标签，直播和交叉将非常困难 - 浏览方式。

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

如果你不需要这个，那么由于 createMediaElementSource（） 方法。

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

创建这些MediaSource对象后，原始媒体将与正常输出断开连接。 您需要将静音属性设置为未设置或设置为false 才能将其视为MediaSource对象。

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.

这是一个简单的示例，它允许您仅从WebAudioAPI静音/取消静音视频源：

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>

请注意，传递给此方法的媒体必须来自安全域请求（请参阅 CORS ）。

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

这篇关于从HTML5视频中获取音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！