regions-envelope.js

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js'
import EnvelopePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/envelope.esm.js'

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

// Initialize the Regions plugin
const wsRegions = ws.registerPlugin(RegionsPlugin.create())

const envelope =  ws.registerPlugin(EnvelopePlugin.create({
}))

wsRegions.on('region-created', (region) => {
  [
    { time: region.start, volume: 0 },
    { time: region.start + 2, volume: 1 },
    { time: region.end - 2, volume: 1 },
    { time: region.end, volume: 0 },
  ].forEach((point) => envelope.addPoint(point))
})

// Create some regions at specific time ranges
ws.on('decode', () => {
  // Regions
  wsRegions.addRegion({
    start: 0,
    end: 8,
  })

  wsRegions.addRegion({
    start: 12,
    end: 17,
  })
})