When want to display audio waveform from audio file, you can find browser libraries like WavesurferJs, Squiggl, or whatever, everyone works the same:
- Load audio (in full) file and get its AudioContext
- Get all the raw PCM samples from one channel in Float32Array (huge) with something like
ctx.decodeAudioData().getChannelData(0)
- Use drawing routine and average samples
Doing this process on the users browser is quite slow and wasteful in a magnitude proportional to the audio file size, as you have to fully load it then get huge amount of samples calculated in the drawing stage.
So one option to overcome this is to dump a shorter version of PCM data on a static file with an amount of samples enough to render the waveform and having a reasonable size by averaging the samples.