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