如何从视频元素中获取频率数据并动态输入音频 API答案

【问题标题】：How to get frequency data from video element and feed into audio API on the fly如何从视频元素中获取频率数据并动态输入音频 API
【发布时间】：2013-06-27 17:21:23
【问题描述】：

我正在尝试使用以下方法创建视频可视化（最少的代码只是为了查看可能性）：

HTML：

<canvas id=canvas width=427 height=240></canvas>

JS：

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>

尤其是当我使用 scriptProcessor Node 获取音频数据，但我想动态更改视频源并且视频标签不支持它时。

提前致谢，

【问题讨论】：

标签： javascript audio video html5-video html5-audio

【解决方案1】：

Chromecast 不完全支持网络音频。频率数据是不支持的内容之一。查看错误here

【讨论】：