Я играю с 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() всегда возвращает пустой типизированный массив.
Любое понимание можно оценить, даже если это окажется невозможным. Я думаю, что я единственный, кто не хочет делать вещи в режиме реального времени.
Спасибо.