katspaugh / wavesurfer.js

Audio waveform player
https://wavesurfer.xyz
BSD 3-Clause "New" or "Revised" License
8.76k stars 1.62k forks source link

Possible to use without audio src and just a peaks array? #2037

Closed peterj35 closed 3 years ago

peterj35 commented 4 years ago

Hello, first of all thank you for the awesome library 👏

Was just wondering if it was possible to use wavesurfer as just a seekbar, by passing in a generated peaks array and no audio src.

We have two wavesurfer instances in our app - one is a larger, 'main' one with a peaks array, and another is a smaller instance with a user-defined sub-range of the larger peaks array (ie. programmatically calculated from peaks data given timestamps such as a:bc ~ x:yz). We would like to use the smaller instance as a separate 'seekbar' for the larger wavesurfer instance, by emitting events and updating the larger instance (eg. when seeked or played/paused). We only want 1 instance for the actual playback, within the 'larger' instance.

I imagine creating this sort of 'sub-range' wavesurfer instance will be possible if we were to create a dummy mp3 source with the duration of the sub-range, and passed in the calculated sub-range of the peaks array. The duration of the src & the waveforms would be correct, and the correct audio would be playing (by another element), when the events from this smaller wavesurfer are propagated. However, creating this dummy mp3 source would not be ideal, one of the reasons being that the smaller instances' range may be dynamic, and from what I could tell the duration of the audio src is used to determine duration of the audiowaves.

I am aware of the Regions plugin and that may be how we create these sub-ranges from the total track, but don't think there's a way to create a new, separate wavesurfer instances from a given region, which is what I am looking for.

To summarize, is there a way to utilize just the waveform & seeking (event emitting) capability of wavesurfer without having an actual audio source, but by defining the waveform with a peaks array?

sundayz commented 4 years ago

I don't think it's currently possible, but Wavesurfer is pretty modular so it would be possible to add some functionality like this. Maybe we could make an audio backend called NoAudio which implements the backend methods as empty functions.

For now, maybe you can try using the MediaElement backend and manually calling cancelAjax() right after load() which will stop the download of the mp3 file. You can also mute wavesurfer and force it to be paused so you can use it without audio.

You can also try supplying a totally silent mp3 file, but provide your own peaks array.

entonbiba commented 3 years ago

@peterj35 see the following ticket: #2058 , reopen this one if the one referenced does not help.