regions-simple.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', () => {
  wsRegions.addRegion({
    start: 12,
    end: 17,
    content: 'Drag me',
    color: 'rgba(100, 0, 0, 0.2)',
  })
})

wsRegions.on('region-updated', (region) => {
  console.log('Start', region.start, 'end', region.end)
})