wavesurfer.js Plugin system

Disable and enable plugins on the fly:


Initialising wavesurfer with plugins


The plugins option is an array of plugin definitions. Calling a plugin with the parameter deferInit: true will stop it from automatically initialising – you can do that at a later time with wavesurfer.initPlugin('mypluginname').

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    // ... other wavesurfer options
    plugins: [
        WaveSurfer.timeline.create{
            container: '#wave-timeline',
            // ... other timeline options
        })
    ]
});

wavesurfer.load('example/media/demo.wav');

Dynamically adding and initialising a plugin


var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    // ... other wavesurfer options
});

// adding and initialising a plugin after initialisation
wavesurfer.addPlugin(WaveSurfer.timeline.create{
    container: '#wave-timeline',
    // ... other timeline options
})).initPlugin('timeline')

wavesurfer.load('example/media/demo.wav');

Fork me on GitHub