Examples Docs GitHub

Plugins

How to configure a plugin

To start using a plugin, you need to insert the plugin library into your HTML page, alongside wavesurfer.js, like this:

<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>

You need to include the plugin's configuration when creating an instance of WaveSurfer:

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    plugins: [
        WaveSurfer.regions.create({})
    ]
});

If you are using the NPM package with Webpack or another bundler, the plugins are installed in node_modules with the wavesurfer.js package, but they must first be imported or required locally in order to use them: 


// ES6: import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";
var RegionsPlugin = require("wavesurfer.js/dist/plugin/wavesurfer.regions.min.js");
var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    plugins: [
        RegionsPlugin.create({})
    ]
});

Plugins