wavesurfer.js | Timeline plugin

Disable and enable plugins on the fly:

Minimap

Timeline

Cursor

Spectrogram

Regions

Elan

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.mp3');

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.mp3');

wavesurfer.js Plugin system

Disable and enable plugins on the fly:

Initialising wavesurfer with plugins

Dynamically adding and initialising a plugin