How can I make bbc/audiowaveform peaks match wavesurfer.js'?

[jvtrigueros]

Taking the recommendation from the the wavesurfer website, I'm attempting to pre-generate the peaks using bbc/audiowaveform.

The peaks do load much faster, but I'm unable to find the right parameters that make them look the same as wavesurfer.js' peaks. For reference, here's what they look like using bbc/audiowaveform and normalizing using the Python script:

And this is what the it looks like generating them on the frontend with wavesurfer.js:

I'm using all the default settings on both wavesurfer.js and bbc/audiowaveform.

Any hints would be greatly appreciated. The benefits are clearly there in terms of load times but I lose a ton of fidelity, so might as well use the <audio/> tag.

[katspaugh]

Wavesurfer does a max value sampling, so waveforms tends to look fat when the data has outliers.
Setting a lower sample rate might help (try passing --pixels-per-second 1 to audiowaveform).

If it doesn't help, try smoothening the data by averaging the values (don't run the Python script in this case):

const averagePeaks = []
const sampleSize = 10
const maxValue = 127 // audiowaveform peaks are -127..127
for (let i = 0; i < peaks.length; i += sampleSize) {
  averagePeaks.push(
    peaks.slice(i, i + sampleSize).reduce((sum, v) => sum + Math.abs(v)) / sampleSize / maxValue
  )
}
return averagePeaks

[jvtrigueros]

This looks a lot better! I did have to add the normalize: true options to WaveSurfer, but I get the gist of what you're suggesting. Here's what that waveform looks like:

[katspaugh]

normalize: true is not perfect either because it doesn't know the range of values, so it basically just divides every value by the max value in the peaks array. So it kind of stretches the waveform to the full height of the container.