dual-waveform.js

// Dual waveform

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
    container: document.body,
    url: '/examples/audio/demo.wav',
    height: 50,
})

wavesurfer.on('ready', () => {
  const zoomedWavesurfer = WaveSurfer.create({
    waveColor: 'rgb(200, 0, 200)', 
    progressColor: 'rgb(100, 0, 100)',   
    container: document.body,
    media: wavesurfer.getMediaElement(),
    peaks:  wavesurfer.exportPeaks(),
    duration: wavesurfer.getDuration(),
    minPxPerSec: 200,
  })

  zoomedWavesurfer.on('click', () => {
    zoomedWavesurfer.play()
  })
})

wavesurfer.on('click', () => {
  wavesurfer.play()
})