Panner Filter Example

← left
right →

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


2. Create a Panner Node

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

var 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(;
    var x = Math.sin(xDeg * (Math.PI / 180));
    wavesurfer.panner.setPosition(x, 0, 0);

Fork me on GitHub