如何从 HTML5 中的视频中提取音频？

Posted 2023-05-08

【中文标题】如何从 HTML5 中的视频中提取音频？

【英文标题】：How can audio be extracted from a video in HTML5?

【发布时间】：2013-07-06 02:00:37

【问题描述】：

如何从 html5 javascript 中的视频中提取音轨作为原始音频数据？ IE。一个样本数组？

我对 HTML5 视频 API 完全陌生，所以举个例子就好了。

【问题讨论】：

我不知道 Javascript 是否适合这样的任务。请参考本主题：***.com/questions/11182587/…

【参考方案1】：

Web Audio API 正是您想要的。特别是，您希望将MediaElementAudiosourceNode 提供给AnalyserNode。不幸的是，Web Audio API 仅在 Chrome 中实现（在 FF 中实现了一些），甚至 Chrome doesn't have full support for MediaElementAudioSourceNode yet。

var context = new webkitAudioContext();

// feed video into a MediaElementSourceNode, and feed that into AnalyserNode
// due to a bug in Chrome, this must run after onload
var videoElement = document.querySelector('myVideo');
var mediaSourceNode = context.createMediaElementSource(videoElement);
var analyserNode = context.createAnalyser();
mediaSourceNode.connect(analyserNode);
analyserNode.connect(context.destination);

videoElement.play();

// run this part on loop to sample the current audio position
sample = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(sample);

【讨论】：

非常感谢，这正是我所追求的。希望很快会有更多的浏览器支持这一点。

我们也可以走另一条路吗？给定一些样本和镜头，可以创建视频吗？

@James 也许吧？音频 API 可能允许您缓冲样本并以某种方式重新播放它们，但我不确定。在任何情况下，您都无法制作实际的视频文件，但您可以将静音视频与音频播放同步。

Firefox 很快就会支持这个 API。其中大部分针对 Firefox 24（大约 12 周内）。它应该会在大约 5 周内到达 beta 频道。 MediaElementAudioSourceNode 尚未实现，但应该会在接下来的几天或几周内在 Nightly 上可用。开发人员现在正在积极实施这一点。更多文档：[Firefox 上的 Web Audio API](hacks.mozilla.org/2013/07/web-audio-api-comes-to-firefox) 和 [MDN Web Audio API doc](developer.mozilla.org/en-US/docs/Web_Audio_API)

@starkm 我想您可能正在寻找Is there a way to use the Web Audio API to sample audio faster than real-time?，它简要描述了比实时更快的OfflineAudioContext（另请参阅MDN's documentation on it。不过，我从未使用过它。