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

Create a plugin that extends an existing plugin


The CursorCustomPlugin is a plugin that extends the basic CursorPlugin, so you can override some methods with your custom features, maintaining the existing functionalities and the library support.

Adding type=module on the script element of your js script, allows the browser to treat the script as an ECMAScript module, so you can use import statements to import the CursorCustomPlugin.

  <script type="module" src="app.js"></script>
If you are using a framework instead, you should modify your babel configs, adding this configuration

presets: [
      [
         '@babel/preset-env',
         {
            "targets": {
               "esmodules": true
            }
          }
       ]
    ],
                            

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

Fork me on GitHub