realtime.js

// Web Audio example

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

// Create a WaveSurfer instance and pass the media element
const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  mediaControls: true,
})

const rtWavesurfer = WaveSurfer.create({
  container: document.body,
  interact: false,
  waveColor: 'rgb(0, 0, 200)',
  progressColor: 'rgb(0, 0, 200)',
  cursorColor: 'transparent',
})

wavesurfer.once('play', () => {
  // Create Web Audio context
  const audioContext = new AudioContext()
  
  // Create a MediaElementSourceNode from the audio element
  const audio = wavesurfer.getMediaElement()
  const mediaNode = audioContext.createMediaElementSource(audio)

  // Create an analyser node
  const analyser = audioContext.createAnalyser()
  analyser.fftSize = 512 * 2
  analyser.connect(audioContext.destination)
  const dataArray = new Float32Array(analyser.frequencyBinCount)

  mediaNode.connect(analyser)
  analyser.connect(audioContext.destination)

  wavesurfer.on('timeupdate', () => {
    analyser.getFloatTimeDomainData(dataArray)
    rtWavesurfer.load('', [dataArray], 1)
  })
})