Incrementally add audio data and append on existing waveform

[mxngls]

I am honestly not quite sure if this belongs more to the Q&A section or here, but I decided to add this as an idea for now. Please feel free to change category when you see it fit to do so.

My current use case for Wavesurfer.js resolves a lot around big .wav files. For now we do not have big performance issues, though it would be great to could down the time it takes to generate the wave a bit. From some personal experiments with the WebAudio API it seems that most of the time generating the waveform is spend loading the audio data into the audio context.

What I would like to do is only fetch part of a file and draw the waveform for that part. After a specific user interaction we would then fetch another part of the file and draw that part of the wave.
In combination with the mini-map plugin I had the following in mind: Pre-generate peaks on the server to draw the mini-map and only load a requested part into the main waveform (for example the first 10 seconds of a 60 second long file). Then when the user clicks on a - not yet loaded part on the mini-map - we fetch that part of the audio file from the server and draw that specific part of the main waveform. This would continue until the whole file is loaded and the main waveform is fully drawn.
Another currently possible approach would be to simply redraw the waveform after we fetch more data. I am unsure about possible performance issues though.

I would be glad to receive some feedback on my general way of thought and if possible instructions on how to implement the above.

[katspaugh]

That's definitely a great idea!

ChatGTP indicates it might be possible to do this using the Range header like this:

fetch('path/to/audio/file', {
  headers: {
    'Range': 'bytes=0-102400' // This example requests the first 100 KB.
  }
})
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
  // Proceed to decode the partial audio data.
});

I haven't tested this though. I would be interested to work on this, especially if properly incentivized via the Sponsors program.

[mxngls]

To load audio data incrementally works pretty well as expected. I have not yet tested though to load data for the main waveform and it's minified version separately OR to try to decouple loading audio and waveform data. I am currently still using v6 and think without modifications of the source neither approach is really workable at the moment. I mainly did not yet pursue this idea further as I try to avoid storing additional waveform data separately on the server.

---

Regarding the sponsorship: Is there a way for one-time donations of some sort? I am often more inclined to sponsor stuff that I frequently use when I do not have to commit on a monthly basis (already too many stuff that I kinda have lost track off). I sometimes tip other services I use frequently annually though.

[katspaugh]

Yes, I think it can be probably hacked together to some extent outside of the wavesurfer code using its API, or as a plugin. Might require some changes to the core though.

[seanwarman]

I've been doing something similar to this except that I'm trying to get continuous playback, I can load in parts of the buffer bit by bit but there's a tiny little gap in the playback each time.

I've tried a few different methods, even loading a few separate wavesurfers and playing them one after the next.