从html5中的视频标签中读取音频频谱

Posted 2023-05-08

【中文标题】从html5中的视频标签中读取音频频谱

【英文标题】：Reading audio spectrum from Video tag in html5

【发布时间】：2014-03-19 14:04:58

【问题描述】：

我知道有一种方法可以使用 Web Aduio API 读取音频频谱，让您 创建用于播放曲目的频谱可视化器。 有没有办法对 Web Video API 做同样的事情？我想显示音频 播放 html5 youtube 视频的频谱。

谢谢

【参考方案1】：

使用<video> 元素作为输入，Web Audio API 工作得很好。代码大致是这样的。

var context = new AudioContext();
var source = context.createMediaElementSource(document.getElementById('video'));
var analyser = context.createAnalyser();

sourceNode.connect(analyserNode);
analyserNode.connect(context.destination);

// etc.

但是，这不适用于 YouTube 视频，原因有两个：

1) YouTube 的 <video> 元素位于 iframe 内，javascript 不会让您访问与父页面不同域的 iframe 内的 DOM。

2) 元素引用的视频文件将从不同的域提供，Web Audio API 只能访问来自同一域或使用 CORS 标头提供的视频/音频文件。即使您有权访问 YouTube 视频文件的 URL，也不会使用 CORS 标头。

您将不得不在自己的服务器上托管视频。

【讨论】：

感谢您的详细解答！

但是 javascript 不能访问 iframe 中的元素吗？我认为禁止其他方式 - 尝试从 iframe 中访问主机。另外，为什么视频 api 不允许 CORS？毕竟大多数网站将使用不同的主机进行流式传输或想要嵌入视频。

禁止任何一个方向。从技术上讲，CORS 是允许的，但 YouTube 不会在他们的服务器上启用它，因为他们希望您使用 iframe，以便他们可以展示广告、收集统计数据并让复制实际视频文件变得更加困难。

值得注意的是，即使在这个问题发布一年后，Safari 对createMediaElementSource 的支持也参差不齐。它在 7 中坏了，我认为是 ios。不知道 8。当然，IE 中还没有 Web Audio API。

有人可以举一些以