我正在使用 Web Audio API 并试图找到一种导入 mp3 的方法(因此这仅在 Chrome 中),并在画布上生成它的波形。我可以实时执行此操作,但我的目标是比实时执行此操作更快。
我能找到的所有示例都涉及从分析器对象中读取频率数据,在一个附加到 onaudioprocess 事件的函数中:
processor = context.createJavascriptNode(2048,1,1);
processor.onaudioprocess = processAudio;
...
function processAudio{
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
//calculate magnitude & render to canvas
}
但看起来,analyser.frequencyBinCount
只有在播放声音时才会填充(关于缓冲区被填充的东西)。
我想要的是能够尽快手动/以编程方式单步执行文件,以生成画布图像。
我到目前为止是这样的:
$("#files").on('change',function(e){
var FileList = e.target.files,
Reader = new FileReader();
var File = FileList[0];
Reader.onload = (function(theFile){
return function(e){
context.decodeAudioData(e.target.result,function(buffer){
source.buffer = buffer;
source.connect(analyser);
analyser.connect(jsNode);
var freqData = new Uint8Array(buffer.getChannelData(0));
console.dir(analyser);
console.dir(jsNode);
jsNode.connect(context.destination);
//source.noteOn(0);
});
};
})(File);
Reader.readAsArrayBuffer(File);
});
但是 getChannelData() 总是返回一个空的类型化数组。
任何见解都值得赞赏 - 即使事实证明它无法完成。我想我是唯一一个互联网不想要做的东西,在实时。
谢谢。