HLS.js with wavesurfer 7

[solher]

Hello, first of all, thank you for your work :)

I just tried to upgrade to wavesurfer 7 and I'm a bit confused about how I should use the new api with HLS.js.
Here is how I was basically doing so far:

  const waveform = createRef<HTMLDivElement>()
  const video = createRef<HTMLVideoElement>()
  const wavesurfer = useRef<WaveSurfer | null>()

  // Wavesurfer setup 
  useEffect(() => {
    const WaveSurfer = require('wavesurfer.js')
    const newWavesurfer = WaveSurfer.create({
      container: waveform.current,
    })
    wavesurfer.current = newWavesurfer
  }, [])

  // HLS.js load
  useEffect(() => {
    const hls = new Hls()
    hls.loadSource(sourceUrl)
    hls.attachMedia(video.current)
    wavesurfer.current.load(
      video.current,
      sourcePeaks
    )
  }, [])

Now that I cannot use the load method the same way as before, I tried to do:

  // HLS.js load
  useEffect(() => {
    const hls = new Hls()
    hls.loadSource(sourceUrl)
    hls.attachMedia(video.current)
    wavesurfer.current.setOptions({
      media: video.current,
      peaks: [
        sourcePeaks,
        sourcePeaks,
      ],
    })
  }, [])

But it doesn't seem to be working. Nothing happens.

Any idea? Thank you 🙏

[solher]

I think I found a solution. It could be related to #3197. I tried to create every time a new wavesurfer object instead of setting the options later on and it seems to be working now.

It flickers a little bit because it needs to recreate the whole thing every time but it's ok 👌

[katspaugh]

Yes, creating a new wavesurfer instance to attach a new media is what I would do as well. To avoid flicker, you could give your container a fixed height.

[fv-zhipeng]

Hey bro , I wonder if that works with hls and wavesuffer ? can you show wave now