Add visual only mode without loading audio file, just peaks and add ignore seek event option in seekTo and setTime method

[NILAXY]

Hi, i'm developing a feature for a web-based radio platform that allows users to view and interact with audio waveforms in real-time, indicating what's currently being played. For this, I am utilizing wavesurfer.js to render multiple waveforms that include regions serving as cue points.

The waveforms are for visual representation only, with peaks already pre-generated, so there's no need to play the audio or load the audio files — doing so would only increase bandwidth usage unnecessarily.

An essential aspect of the user experience is ensuring the waveform progress is synchronized for all users. This is achieved via WebSocket, which updates the waveform progress to keep it in sync with the live broadcast. However, this presents a technical hurdle: whenever the WebSocket updates the progress, it triggers a 'seeking' event in wavesurfer.js. The issue is that the 'seeking' event does not distinguish between an update from the WebSocket and a user's manual seek action.

To streamline this and avoid confusion, it would be beneficial for the seekTo and setTime methods in wavesurfer.js to include an additional parameter that prevents the 'seeking' event from firing when the progress update is system-initiated. This modification would help in maintaining a clear distinction between programmatic updates and user-driven interactions, ensuring a seamless experience for both the users and the backend system managing the live broadcast.

[katspaugh]

You can instantiate wavesurfer with just peaks and duration, without passing any audio URL.

[NILAXY]

[katspaugh]

Seeing your code would help. Make sure it's a recent version, this feature was added in 7.4.0

[NILAXY]

Updated to the newest version, working now but now the seeking event is not fired at all

wavesurfer.value = WaveSurfer.create({
  container: waveform.value,
  height: 32,
  waveColor: '#404048',
  progressColor: '#62626b',
  cursorColor: '#fff',
  responsive: true,
  plugins: [regions],
  peaks: peaks.value,
  duration: item.value.media.duration
})

wavesurfer.value.on('seeking', async (position) => {
 console.log('Seeking to: ' + position)
 await seekToPosition(position)
})

[katspaugh]

For user interactions, you can listen to the click or the interaction event.

See https://wavesurfer.xyz/examples/?events.js and https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferEvents

[NILAXY]

That's working now, i still have a problem with setting the current time with setTime(). It works when i start playing with wavesurfer.play() and then do setTime() but the method isn't giving a callback so it is loading infinitely. Is there a better way to do this?