MediaElementWebAudio Backend Example

Why use MediaElementWebAudio backend

With this backend you can load a big audio file and use it with WebAudio API. In this example it was added a StereoPannerNode and nodes to control independently the volume of both right and left channels, realised with SplitterNode and MergerNode to split and then merge channels with GainNode to control their volume.

        var wavesurfer = WaveSurfer.create({
            container: document.querySelector('#wave'),
            backend: 'MediaElementWebAudio'
        });
        // You have to use the same methods of MediaElement backend to load the audio file, passing peaks
        wavesurfer.load('big_audio.mp3', normalizedPeaks, 11625);

        // Example for StereoPanner node
        wavesurfer.panner = wavesurfer.backend.ac.createStereoPanner();
        let sliderPanner = document.querySelector('[data-action="pan"]');
        sliderPanner.addEventListener('input', () => {
            wavesurfer.panner.pan.value = Number(sliderPanner.value);
        });
        wavesurfer.backend.setFilter(wavesurfer.panner)