The other day I was trying to create a fancy, purely client-side, soundcloud-like waveform like the one embedded below for my podcast player Shikwasa. With Web Audio API's handy
decodeAudioData, extracting the complete data looked easy as pie at first glance.
Until my Chrome crashed the moment it ran the script.
To be fair, the audio file to be decoded has a size of 70.9MB. After some inspection I found
AudioContext.decodeAudioData itself used up almost 10GB of memory simply to decode the audio. No way I could implement the feature with this page-bloater.
On Web Audio API's Github repository, there has been a discussion on this issue, somewhat aggressively asked the team to remove
decodeAudioData for the same reason:
...it will waste hundreds of megs of memory and take several seconds of CPU power, and battery on mobile.
Apparently, SoundCloud decompresses audios from its servers, but there are plenty of pure up front open-source libraries that generate audio waveform themselves. How did they manage to do so?
I went through amplitude.js, wavesurfer.js, soundcloud-waveform-generator and even BBC's waveform-data.js, they all use the same core method to extract data - unfortunately, the disasterous
AudioContext.decodeAudioData. In the last repo someone also mentioned a similar issue.
It might work okay on a small, heavily-compressed .mp3 song but never, ever for a 30 min+ podcast episode.
So far client-side solution seems like a dead-end to me, and I strongly advise you to stop frustrating yourself with it as well. If you have a better solution, please leave a comment and let me know.