I'm working on a DAW in JavaScript and I need to be able to load many (up to 30) long audio files (up to 15 minutes each) and I don't want them to flood the memory. I just want to be able to cut little pieces, process them and mix in ScriptProcessorNode
, but I encountered a couple of problems:
Is there a way to load big audio files, for example, in MP3 format, keep them compressed in MP3 format in memory, but extract little chunks of audio data to the AudioBuffer?
Like, for example:
var request = new XMLHttpRequest();
request.open('GET', 'my_15min_audioFile.ogg', true);
request.responseType = 'arraybuffer';
request.onload = function() {
var longCompressed = new LongAudioNode(request.response);// something similar to fs.open
var channel=1, fromSample=1024, length=2048;
var block/**Float32Array*/ = longCompressed.extractBlock(channel, fromSample, length);/// similar to fs.read
/// do something with this block and then request another from any random index I want
}
request.send();
There is no API in the browser which does exactly what you want. But there might be one in the future. Web Codecs will probably support reading decoded data as a stream.
But there is a workaround which works under certain conditions. You can scan the ArrayBuffer with the encoded data of an MP3 for frame headers and then cut it accordingly. The pieces should still be valid MP3s which can then be decoded with decodeAudioData()
. However there are some gotchas. The decoded pieces might not fit together without any post-processing. The phonograph library is built using this technique.