wavesurfer.js Plugin system

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>

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

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