katspaugh · September 25, 2024 07:27
diff --git a/panner.js b/panner.js
 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)
 }
	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)
	}