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

Question

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

谢谢

Answer 1

网络音频 API 与 <video> 一起工作得很好元素作为输入。代码大致如下所示。

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 header 提供的视频/音频文件。即使您可以访问 YouTube 视频文件的 URL，它也不会与 CORS header 一起提供。

您必须在自己的服务器上托管视频。