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).

Quick start

Methods added to the WaveSurfer object

To get the list of existing regions: wavesurfer.regions.list.


Region objects have the following 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.
minLength number null Optional minimum length for the region (in seconds).
maxLength number null Optional maximum length for the region (in seconds).

Region Methods

Some useful region methods:


Each region object has the following events:

Generic events

Mouse events

WaveSurfer events

In addition, the WaveSurfer instance also fires a set of matching events (passing a region object):