9

我想从<audio>标签中获取 FFT 数据，但如果没有任何语法错误，它就无法工作。查看Web Audio API文档，我写了一个示例代码，这是我的代码：

<audio id="aud" controls="controls" src="test.mp3"></audio>

<script type="text/javascript">
var audioElement = document.getElementById("aud");
var audioContext = new webkitAudioContext();
var streamingAudioSource = audioContext.createMediaElementSource(audioElement);
var jsProcessor = audioContext.createJavaScriptNode(4096,1,1);
jsProcessor.onaudioprocess = process;
var analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;

//streaming:AudioSource->jsProcessor->analyser->destination
streamingAudioSource.connect(jsProcessor);
jsProcessor.connect(analyser);
analyser.connect(audioContext.destination);
//autoplay
audioElement.play();
function process(event){
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);
    document.getElementById("info").innerHTML=freqByteData[1];//show data in div
}
</script>

我的 Chrome 版本是 20.0.1096.1 dev-m，我认为它运行良好。通过process（），我试图写下freqByteData，但它显示为0，并且它们都始终为0。它一定是我的代码有问题，我想知道如何从音频标签中获取频率数据.

4

1 回答 1

3

如果在 window.onload 之前调用 createMediaSourceElement，它似乎会中断。有一个关于这个问题的错误报告：http ://code.google.com/p/chromium/issues/detail?id=112368

目前有两种解决方法：

在执行整个 javascript 之前等待窗口加载事件

window.addEventListener('load', function(){
  // your code
}, false);

或者

在延迟为 0 的 setTimeout 中创建 MediaElementSource

setTimeout(function (){
  var streamingAudioSource = audioContext.createMediaElementSource(audioElement);
  var jsProcessor = audioContext.createJavaScriptNode(4096,1,1);
  // The rest of the code
}, 0);
于 2012-05-09T15:57:19.553 回答