从 HTML5 视频中获取音频

Posted

技术标签:

【中文标题】从 HTML5 视频中获取音频【英文标题】:Get audio from HTML5 video 【发布时间】:2016-01-25 03:11:22 【问题描述】:

我已经尝试了一周的时间来解决这个问题。 我有两个完全不同的视频标签和各自的音频。我也有一个音频标签。首先,两个视频标签都设置了两个静音属性。当我想获取 video1 音频时,我想获取它的音频源并将其分配给音频标签。对video2也做同样的事情。

这可以用 javascript 实现吗?我已经尝试过 Web 音频 API,但我迷路了。请帮忙。

【问题讨论】:

【参考方案1】:

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

要将视频的音频流复制到音频元素,您可以简单地将<audio> 元素的 src 设置为视频的 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)。

【讨论】:

嗨。谢谢,这正是我需要的。

以上是关于从 HTML5 视频中获取音频的主要内容,如果未能解决你的问题,请参考以下文章

从 HTML5 视频中获取原始像素数据

从 HTML5 视频中获取 MP4 创建时间

web获取视频图片第一帧

如何获取 HTML5 视频中加载的当前片段百分比?

如何在 html5 视频播放器中获取视频的持续时间..?

youtube 如何防止从其 HTML5 播放器下载视频?