一周以来我一直在努力解决这个问题。 我有两个完全不同的视频标签及其各自的音频。我也有一个音频标签。首先,两个视频标签都设置了 muted 属性。当我想获取 video1 音频时,我想获取它的音频源并将其分配给音频标签。也对视频 2 执行相同的操作。
这可以用 Javascript 实现吗?我试过网络音频 API,但我迷路了。请帮忙。
最佳答案
我不确定我是否得到了你想要的。
要将视频的音频流复制到音频元素,您可以简单地设置 <audio>
的 src视频 src 的元素:
<audio src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls autoplay></audio>
然后您可以尝试将其与视频标签的 currentTime
同步,或同步视频的 currentTime
与 <audio>
的一个并取消视频静音,而音频将被静音,但我不确定你会得到很棒的结果。此外,如果某些浏览器会同时加载视频两次,也就不足为奇了。
现在,您可以使用 WebAudioAPI 做什么:
将您的音频流以跨浏览器的方式直播到音频标签中真的很难。
但是,如果您不需要它,可以很容易地从视频元素创建一些 MediaSource,这要归功于 createMediaElementSource()
方法。
创建这些 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)。
关于javascript - 从 HTML5 视频中获取音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34984501/