Chrome crashes when generating a waveform of a large file

[pkeuter]

When I try to generate the waveform of a large file (55 minutes, MP3 320kbps) in the browser (with Peaks.js), by not passing a json waveform-file, the memory usage of Chrome starts to get higher rapidly. First it downloads the whole file (obviously), then the CPU gets to 50% on my dual core VM, and quickly after that the memory gets to 1GB, and within a second to 2GB. After another few seconds the tab just crashes and I have to reload the page.

This isn't happening when I pass in a JSON-waveform. It is happening with version 1.4.3 and 1.5.1 (in combination with Peaks.js)

Looks like it's a memory issue, but I don't really know where to look to fix this issue. Would be nice if there's someone who does :-)

[thom4parisot]

Hello @pkeuter,

thanks for reporting your issue! Does peaks displays anything? The problem could happen because of the audio decoding (performed by the browser at once) or somewhere in between.

I suspect the problem to come from audiodecoder.js. If you have any knowledge in debugging it would be helpful (at least with a breakpoint if it hangs there or not).

Eventually, fork this gist and alter it to see if it crashes without Peaks: https://gist.github.com/oncletom/5822102

[pkeuter]

Hi @oncletom,

I did some debugging and it looks that this function:

audioContext.decodeAudioData(raw_response, audioDecoder(options, callback));

starts, but never gets to call the callback (Chrome crashes before that). Does this help? Could this maybe be a Chrome problem? If this is the case, would there be any possibility to tweak some parameters?

[pkeuter]

I was just thinking. I'm using node.js to serve json-waveform-files when the hour is processed. But when I want the user to listen to a still recording hour, the browser has to generate the waveform, which makes this problem occur. Is there any other practice I could use to keep WebAudio out of the waveform-generating?

Thanks!

[thom4parisot]

Hi @pkeuter, well the line you indicate the problem is located at decodeAudioData, which is a browser API. Sadly, this method decodes once, and not in a progressive/streamed way.

Ideally in the future, we should do it through an Audio Worker and meanwhile, best would be to decode the data progressively, as they are received (so several calls to decodeAudioData, per data chunk).

None of this is available in waveform-data at the moment – but we would definitely love to have progressive waveform-data rendering :-)

Does it answer your question?

[pkeuter]

This wasn't the answer I was hoping for, but it does answer my question ;-)

I'll try to look into a way to use the Audio Worker, see if I can find out a way how to do progressive rendering. Although I hope that's not too difficult :-)

Thanks!

[pkeuter]

Ok. So I did some searching on the chunked decoding, and from what I can find, this is not possible for now. It will probably work with linear audio (and possibly ogg), but not with mp3 chunks, because of the headers and frames. It appears that there is some work in progress on building an API that does support this:

WebAudio/web-audio-api#7

For now I am looking for some kind of a workaround. Would there be a possibility to generate waveform-data in node.js on request? Another option I'm considering is to just not create a waveform (but then all other functionality in peaks.js still has to keep working :-)). Possibly use ffmpeg (which records my audio input to pipe to audiowaveform, but it appears this isn't possible either...

What would be the best way to proceed? I hope the first option is possible, but I am not sure at all. How do you use this at BBC, because you probably have to deal with hour-long audio files as well?

Thank you :-)

[thom4parisot]

@pkeuter hi :-) thanks for investigating the case.

waveform-data can actually only generate data files from the WebAudio interface. The resampling function could be shared if you are able to read and decode an mp3/ogg/audio file directly with Node (because all you need is to iterate over the decoded buffer).

I guess mp3.js, ogg.js and/or node-lame could help to achieve this :-)

[chrisn]

I'll close this, as there doesn't seem to be any change needed to this library. Please open a new issue if needed.