I have a web page that plays mp3s. I would like to create a visual graph of each mp3: volume level vs. time like Sound Cloud does. The only idea I have been able to come up with is to decode the mp3 with the web audio api, connect an analyzer node, play it through and record the levels at various times. Surely there is a better way. Does anyone know what it is?
You can grab the full AudioBuffer after decodeAudioData and just go through the samples that way (using getChannelData()). The samples will be floats from -1 to +1.
All you really have to do is group the samples into buckets of n length, where n is the total length of the AudioBuffer divided by the total number of pixels you want to render the waveform into. Then just find the maximum absolute value in each bucket and those are the values you'll draw.
No AnalyserNode needed for that, so you can do it all really quickly instead of having to do it in real-time.