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

Question

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

由于

Answer 1

Web Audio 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头的视频/音频文件。即使您有权访问YouTube视频文件的网址，也不会使用CORS标头。

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