Javascript 如何从视频元素中获取频率数据并动态地将其输入音频API

我正在尝试使用下面的方法创建视频可视化（只需少量代码即可看到这种可能性）：

HTML:

JS:

var context=new-webkitAudioContext（）
，analyzer=context.createAnalyzer（）
，video=document.createElement（'video'）
，source=context.createMediaElementSource（视频）
，canvas=document.getElementById（'canvas'）
，ctx=canvas.getContext（'2d'）
;
var loadVideos=函数（）{
video.src='my video.ogg'；
源。连接（分析仪）；
分析器.连接（上下文.目的地）；
video.play（）；
视频可视化（）；
}
加载视频（）；
功能视频可视化（）{
window.webkitRequestAnimationFrame（视频可视化）；
ctx.drawImage（this.video，0，0，canvas.width，canvas.height）；
var FREKBYTEDATA=新UINT8阵列（分析仪频率BINCOUNT）；
分析仪。获取频率数据（频率数据）；
对于（i=0；i

如果我将此项添加到中，则可以轻松完成此操作：

<video id=video controls width=427 height=240>
    <source src="my video.ogg" type="audio/ogg" />
</video>

特别是当我使用scriptProcessor节点获取音频数据时，但我想动态更改视频源，而视频标记不支持它

---

提前感谢，Chromecast不完全支持网络音频。频率数据是不受支持的内容之一。检查错误

var context = new webkitAudioContext()
  , analyser = context.createAnalyser()
  , video = document.createElement('video')
  , source = context.createMediaElementSource(video)
  , canvas = document.getElementById('canvas')
  , ctx = canvas.getContext('2d')
  ;

var loadVideos = function() {
    video.src = 'my video.ogg';
    source.connect(analyser);
    analyser.connect(context.destination);

    video.play();
    videoVisualization();
}
loadVideos();

function videoVisualization() {
    window.webkitRequestAnimationFrame(videoVisualization);
    ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);

    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);

    for (i = 0; i < freqByteData.length; ++i) {
        console.log(freqByteData[5]);
    }
}

<video id=video controls width=427 height=240>
    <source src="my video.ogg" type="audio/ogg" />
</video>