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

Question

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

谢谢

Answer 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 标头。

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