wavesurfer.js Annotations Tool


Click on a region to enter an annotation.
Shift-click plays a region in a loop.


Region events:

Regions Plugin

Regions are visual overlays on waveform that can be used to play and loop portions of audio. Regions can be dragged and resized.

Visual customization is possible via CSS (using the selectors .wavesurfer-region and .wavesurfer-handle).

To enable the plugin, add the script plugin/wavesurfer.regions.js to your page.

After doing that, use wavesurfer.addRegion() to create Region objects.

Exposed Methods
Region Options
option type default description
id string random The id of the region.
start float 0 The start position of the region (in seconds).
end float 0 The end position of the region (in seconds).
loop boolean false Whether to loop the region when played back.
drag boolean true Allow/dissallow dragging the region.
resize boolean true Allow/dissallow resizing the region.
color string "rgba(0, 0, 0, 0.1)" HTML color code.
Region Methods
Region Events

General events:

Mouse events:

Fork me on GitHub