drag differents color regions in react

[anbotz]

Hi,
i'm using wavesurfer region plugin with react. I aim to draw 2 types of regions on the player (red/blue).

import { useCallback, useEffect, useRef, useState } from 'react'
import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions'
import { Button } from './components'

const MAX_FREQUENCY = 8000
const SHOW_PLAYER = true

const Waveform = ({
  audioElementRef,
  src,
}: {
  src: string
  audioElementRef: React.RefObject<HTMLAudioElement>
}) => {
  const waveformRef = useRef<HTMLDivElement>(null)
  const wavesurferRef = useRef<WaveSurfer | null>(null)
  const regionsPluginRef = useRef<RegionsPlugin | null>(null)
  const [regionColor, setRegionColor] = useState('red')

  useEffect(() => {
    if (audioElementRef.current && waveformRef.current) {
      const regions = RegionsPlugin.create()
      regionsPluginRef.current = regions

      wavesurferRef.current = WaveSurfer.create({
        container: waveformRef.current,
        height: SHOW_PLAYER ? 150 : 0,
        sampleRate: MAX_FREQUENCY * 2,
        plugins: [regions],
        media: audioElementRef.current,
        // url: src,
        barAlign: 'bottom',
        barHeight: 30,
        barWidth: 2,
        waveColor: 'rgb(2, 132, 199)',
        progressColor: 'grey',
      })

      return () => {
        wavesurferRef.current?.destroy()
      }
    }
    return () => {}
  }, [audioElementRef, src])

  useEffect(() => {
    if (regionsPluginRef.current) {
      regionsPluginRef.current.enableDragSelection({
        color: regionColor,
      })
    }
  }, [regionColor])

  const changeRegionColor = useCallback(() => {
    const newColor = regionColor === 'red' ? 'blue' : 'red'
    setRegionColor(newColor)
  }, [regionColor])

  function togglePlay() {
    wavesurferRef.current?.playPause()
  }

  const isPlaying = wavesurferRef.current?.isPlaying()

  return (
    <div className="flex flex-row items-center gap-4">
      <Button
        className="flex h-20 w-20 flex-none items-center justify-center rounded-full text-2xl"
        onMouseUp={togglePlay}
      >
        {isPlaying ? '❚❚' : '▶'}
      </Button>
      <Button
        className="flex h-20 w-20 flex-none items-center justify-center rounded-full text-2xl"
        onMouseUp={changeRegionColor}
      >
        {regionColor}
      </Button>
      <div className="relative flex w-full flex-col">
        <div ref={waveformRef} />
      </div>
    </div>
  )
}

export default Waveform

With my current code, it is working, but there is a small bug behind :

• I use the switch button (eg red to blue)
• I draw a new blue region
• i drag the new blue region
• bug : there is a red region hidden behind the previously dragged one

am I missing something ? is there a better way to do this ?

[katspaugh]

The only possible problem I could spot with your code is this:

  useEffect(() => {
    if (regionsPluginRef.current) {
      regionsPluginRef.current.enableDragSelection({
        color: regionColor,
      })
    }
  }, [regionColor])

This will enable drag selection multiple times which is not something wavesurfer expects. It can lead to the drag gesture firing multiple times, i.e. creating multiple regions at once. You can fix it by adding a return:

  useEffect(() => {
    if (regionsPluginRef.current) {
      const disableDragSelection = regionsPluginRef.current.enableDragSelection({
        color: regionColor,
      })
      return disableDragSelection
    }
  }, [regionColor])

[anbotz]

ok this is exactly what i was looking for, it works perfectly
i think this is the "return" part of the documentation i wasnt sure about

thanks, keep the good work !