从 HTML5 视频中获取音频

Question

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

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

Answer 1

我不确定我能得到你想要的东西。

要将视频的音频流复制到音频元素，您可以简单地将元素的 src 设置<audio>为视频的 src ：

<audio src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls autoplay></audio>

然后，您可以尝试将其与您的视频标签同步currentTime，或者将视频currentTime与 的<audio>同步，然后取消视频静音，而音频将被静音，但我不确定您会得到很棒的结果。此外，如果某些浏览器会同时加载视频两次，也就不足为奇了。

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

以跨浏览器的方式实时将音频流放入音频标签中确实很困难。

但是，如果您不需要这个，那么借助该createMediaElementSource()方法，可以很容易地从视频元素创建一些 MediaSource。

创建这些 MediaSource 对象后，您的原始媒体将与正常输出断开连接。您需要保持它们的muted属性未设置或设置为 false才能将其作为 MediaSource 对象听到。

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

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）。