# 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 = Object.create(WaveSurfer);

    wavesurfer.init({
        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);
    });

Fork me on GitHub