Using Wavesurfer as a front end UI only, no audio source. Looking for advice on coding this feature.

[KaleSurfer]

Hello,

I would like to use WaveSurfer as a front end player UI (because it's an amazing UI) but I'm not using the audio part, and will not be using audio sources (no blank / empty wav blobs, or audio sources etc) as a workaround. I want WaveSurfer to play, and timer/bar to move (aka I instantiate WS, tell it duration, and it will play visually, but create no sound). I may need to use durations ranging from 1 minute to 24 hours or more and have hundreds of WaveSurfer instances in an app or across multiple screens.

If there's no way to handle this use case, I would love to build one. Perhaps as a WaveSurferOptions?

//For Example:
const wavesurfer = WaveSurfer.create({
     silentMode: true,  //Plays/Seeks, but no Audio. Just needs a duration
     duration: 3600, //Silently plays for 1 hour.  Or perhaps create a new variable called silentDuration
     container: document.body, 
     waveColor: 'rgb(200, 0, 200)',
     progressColor: 'rgb(100, 0, 100)',
     //... etc
})

Any advice on where to start, or gotchas to work on this to do a pull request?

Thanks

[katspaugh]

Hey @KaleSurfer, thank you for the generous donation! ❤️

Wavesurfer already supports a slient mode (since 7.7.0). You can just skip the url and only provide peaks and duration, and it will render a waveform.
See https://wavesurfer.xyz/examples/?28c9974160c53983e6d6d5286e0f0558

Alternatively, you can do it with load like this:

wavesurfer.load('', peaks, duration)

Let me know if this works for your use case, happy to adjust the API.

Cheers!

[KaleSurfer]

Marking this as the answer, since 7.7.4 has this feature working great (fixed #3575)

[KaleSurfer]

Thank you for the response, I'll try this out asap.

Update:
Both methods show a visual. Neither example fires the 'seeking' event, nor allows me to do .play(), unfortunately. I was expecting it to have the same behavior as a blank / empty wave file.

[katspaugh]

For that to work you might need to add backend: 'WebAudio'. I’ll test it on my end and will get back to you.

[KaleSurfer]

Thanks,

I tried backend Webaudio using the load() method you mentioned above with '' url param, and it played, and fired 'seeking', but only after the 1st click or 2nd click did it visually change. Modifying load to an empty waveform (still using backend webaudio) required no extra click. Not sure why it's doing that, but perhaps a bug?

Very close to the behavior I was looking for.

[katspaugh]

True, there's a bug with seeking with the WebAudio option, it reports the time from a previous click.

I can reproduce it here: https://wavesurfer.xyz/examples/?28c9974160c53983e6d6d5286e0f0558

I'll file a bug report.

Edit:
Here's the issue: #3575. To give you a time estimation, I'll likely look into this this weekend.

[KaleSurfer]

Thanks a ton!

[katspaugh]

Hey @KaleSurfer, this should be now fixed in 7.7.4. Cheers!

[KaleSurfer]

Looking good so far! Much appreciated.

[dgorgone]

I'd like to do this with the multitrack plugin, but it's not working. I know it's not supported, but since this is just the discussion section, I wanted to get any feedback. When I call multitrack 'addTrack' with the options for a silent file (backend = 'WebAudio', peaks provided, duration provided) it does not work. From my debugging, it seems that multitrack will calculate duration based on the audio (or lack thereof) provided instead of using the options provided. This works fine using wavesurfer.js standalone, but the duration is ignored using multitrack. Any ideas on how to workaround this?

[dgorgone]

I was able to change the source code to multitrack.ts to get this working. I re-added the omitted "duration" property to the SingleTrackOptions (not sure why it was omitted), and in the addTrack method, I changed the assignment of duration to check if duration was zero or NaN, and if so, use the track options duration value. This works great and the supplied peaks render correctly. I'm curious why this isn't already in there and why duration is omitted in multitrack.

[katspaugh]

AFAIR the duration option was omitted because it's calculated outside of wavesurfer (via media.duration) and is passed to wavesurfer instances internally.