wavesurfer.js | Panner Example

How to Create a Panner Interface

This is an example of how to add an arbitrary Web Audio node into a wavesurfer.js graph. Panner node is one such node.

1. Initialize wavesurfer.js

Create a WaveSurfer instance and load an audio clip.

var wavesurfer = WaveSurfer.create({
    container: '#demo' // this is the only required param
});

wavesurfer.load('media.wav');

2. Create a Panner Node

Create a panner node and add it to the Web Audio graph using the setFilter method.

var panner = wavesurfer.backend.ac.createPanner();
wavesurfer.backend.setFilter(panner);

3. Create a Range Slider

In your HTML, add a range input.

<input id="panner-input" type="range" min="-45" max="45" value="0" />

4. Bind the Range Slider

Listen to the range input's input event and set the panner's position according to the input's value. Adapted from this SO answer.

var slider = document.querySelector('#panner-input');
slider.addEventListener('input', function (e) {
    var xDeg = parseInt(e.target.value);
    var x = Math.sin(xDeg * (Math.PI / 180));
    wavesurfer.panner.setPosition(x, 0, 0);
});

Panner Filter Example

How to Create a Panner Interface

1. Initialize wavesurfer.js

2. Create a Panner Node

3. Create a Range Slider

4. Bind the Range Slider