Question

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

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

Answer 1

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

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

＆＃13;

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

＆＃13;

然后，您可以尝试将其与视频代码currentTime同步，或将视频的currentTime与<audio>同步并且取消静音视频，而音频会静音，但我不确定你会得到很棒的结果。此外，如果某些浏览器会在同一时间加载视频两次，它将不会是一个惊喜。

现在，你可以用WebAudioAPI做什么：

将音频流转换为音频标签，实时和跨浏览器方式真的很难。

如果你不需要这个，那么通过createMediaElementSource()方法从视频元素创建一些MediaSource非常容易。

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

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

＆＃13;

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

＆＃13;

video {  height: 120px;}

＆＃13;

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

＆＃13;

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

从HTML5视频中获取音频

1 个答案: