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.

[ffxsam]

Hey @katspaugh - I'm gonna piggyback onto this question because it's related.

We're having trouble getting our BBC peaks files working with WaveSurfer. This is how we're generating them on the back end:

audiowaveform -b 8 -z 64 -i inFile -o outFile

We have probably hundreds of thousands of peaks files on S3 like this, so we can't change them. I'm doing this in my code:

      const mp3Url = getFileUrl(track, { request: 'mp3' });
      const waveformUrl = getFileUrl(track, { request: 'waveformData' });

      const response = await axios.get(waveformUrl!, { responseType: 'arraybuffer' });

      if (mp3Url) {
        wavesurfer.stop();
        await wavesurfer.load(mp3Url, response.data);

        if (wasPlaying) {
          wavesurfer.play();
        }
      }

And it results in this when I try to play the track:

If I follow that error trace, this is the minified code where it's happening:

var i = { decode: function(e2, i2) {
  return t(this, void 0, void 0, function* () {
    const t2 = new AudioContext({ sampleRate: i2 });
    return t2.decodeAudioData(e2).finally(() => t2.close());
  });
}, createBuffer: function(t2, e2) {
  return "number" == typeof t2[0] && (t2 = [t2]), function(t3) {
    const e3 = t3[0];
    if (e3.some((t4) => t4 > 1 || t4 < -1)) {
      const i2 = e3.length;
      let s2 = 0;
      for (let t4 = 0; t4 < i2; t4++) {
        const i3 = Math.abs(e3[t4]);
        i3 > s2 && (s2 = i3);
      }
      for (const e4 of t3) for (let t4 = 0; t4 < i2; t4++) e4[t4] /= s2;
    }
  }(t2), { duration: e2, length: t2[0].length, sampleRate: t2[0].length / e2, numberOfChannels: t2.length, getChannelData: (e3) => null == t2 ? void 0 : t2[e3], copyFromChannel: AudioBuffer.prototype.copyFromChannel, copyToChannel: AudioBuffer.prototype.copyToChannel };
} };

Any guidance would be much appreciated!

[ffxsam]

I'll have to devise a method to auto-convert users' waveform data from binary to JSON that fires upon a particular event (like them logging in). Thanks for your help!

[ffxsam]

@katspaugh BTW, what would you recommend as the ideal parameters to pass to audiowaveform for use with Wavesurfer?

[katspaugh]

I haven’t played with it much tbh. I should probably write some documentation on this.

[ffxsam]

I haven’t played with it much tbh. I should probably write some documentation on this.

That's cool! I'll experiment and see what works best. I did like using the binary .dat format since it's much smaller than JSON, but it is what it is. I wonder if we could borrow some code from BBC Peaks to integrate binary waveform data support into Wavesurfer.

[ffxsam]

Welp, that was easy! Leaving the solution here fo anyone else who might need it:

import WaveformData from 'waveform-data';

// ...
      const waveformDataUrl = 'url to audiowaveform binary .dat file';

      const response = await axios.get(waveformDataUrl!, {
        responseType: 'arraybuffer',
      });
      const waveformData = WaveformData.create(response.data).toJSON();

      await wavesurfer.load(mp3Url, [waveformData.data]);