region-update.js

import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'

const ws = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
})

const wsRegions = ws.registerPlugin(RegionsPlugin.create())

ws.on('decode', () => {
  // Regions
  const region = wsRegions.addRegion({
    start: 2,
    end: 8,
  })

  let prevStart = region.start
  let prevEnd = region.end

  region.on('update', () => {
    if (prevStart !== region.start && prevEnd !== region.end) {
      console.log('Moved')
    } else {
      console.log('Resized from the', prevStart !== region.start ? 'start' : 'end')
    }
    prevStart = region.start
    prevEnd = region.end
  })
})