Skip to content

Instantly share code, notes, and snippets.

@katspaugh
Created September 25, 2024 07:27
Show Gist options
  • Save katspaugh/4f00b61846e765f6d68a5c56c9e21379 to your computer and use it in GitHub Desktop.
Save katspaugh/4f00b61846e765f6d68a5c56c9e21379 to your computer and use it in GitHub Desktop.
wavesurfer stereo panner
import WaveSurfer from 'wavesurfer.js'
const wavesurfer = WaveSurfer.create({
container: document.body,
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: '/examples/audio/stereo.mp3',
mediaControls: true,
})
// Create Web Audio context and a panner
const audioContext = new AudioContext()
const panner = audioContext.createStereoPanner()
panner.connect(audioContext.destination)
wavesurfer.on('ready', () => {
// Create a MediaElementSourceNode from the audio element
const audioEl = wavesurfer.getMediaElement()
const mediaNode = audioContext.createMediaElementSource(audioEl)
mediaNode.connect(panner)
})
/*
<html>
<label>
L <input type="range" min="-1" max="1" value="0" step="0.1" id="slider" /> R
</label>
</html>
*/
// Create a vertical slider for each band
const slider = document.querySelector('#slider')
slider.oninput = (e) => {
panNode.pan.setValueAtTime(panControl.value, audioContext.currentTime)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment