regions-click.js

// Regions click through

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

// Initialize the Regions plugin
const regions = RegionsPlugin.create()

// Create a WaveSurfer instance
const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  plugins: [regions],
})

// Create some regions at specific time ranges
wavesurfer.on('ready', () => {
  // Regions
  regions.addRegion({
    start: 2,
    end: 8,
    content: 'Click through',
    color: 'rgba(0, 0, 100, 0.5)',
  })

  const noClickRegion = regions.addRegion({
    start: 11,
    end: 14,
    content: 'No click through',
    color: 'rgba(100, 0, 100, 0.5)',
  })
  
  noClickRegion.on('click', e => e.stopPropagation())
})