Rendered peaks disappear when swapping out audio + peaks file on same Wavesurfer instance

[ffxsam]

We have a single Wavesurfer instance we set up, and then watch for when the user starts playing a different audio track. Code is below.

Randomly, the waveform will disappear, and I'm not sure if I'm doing something wrong to cause this, or it's a bug. Definitely seems to be a race condition of some kind, though.

Code:

watch(
  () => track,
  async (track, oldTrack) => {
    if (!track) return;

    // Only reload waveform if the audio file has changed
    if (track.fileId !== oldTrack?.fileId) {
      const wasPlaying = wavesurfer.isPlaying();
      const mp3Url = getFileUrl(track, { request: 'mp3' });
      const waveformDataUrl = getFileUrl(track, { request: 'waveformData' });
      const peaks = await getPeaks(waveformDataUrl!);

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

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

Behavior:

waves.disappearing.mp4

[ffxsam]

I'm currently jumping to older versions of Wavesurfer to see if this is maybe a bug that was introduced at some point. But it's probably something we're doing wrong. 😅

If I disable Chrome's cache, the bug rarely appears. But if I re-enable the cache, it happens a LOT more frequently.