webaudio-simple.js

// Web Audio example

import WaveSurfer from 'wavesurfer.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'
})

// Create Web Audio context
const audioContext = new AudioContext()

// Create a filter
const filter = audioContext.createBiquadFilter()
filter.type = 'lowpass'
filter.frequency.value = 300
filter.connect(audioContext.destination)

// Create a MediaElementSourceNode from the audio element
const mediaNode = audioContext.createMediaElementSource(wavesurfer.getMediaElement())
mediaNode.connect(filter)

// Create a vertical slider for each band
const slider = document.createElement('input')
slider.type = 'range'
slider.min = 20
slider.max = 3000
slider.value = filter.frequency.value
slider.step = 0.1
slider.oninput = (e) => (filter.frequency.value = slider.valueAsNumber)
document.body.appendChild(slider)

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