

WAVESURFER EXAMPLE UPDATE
update - When the region's options are updated.remove - Happens just before the region is removed.play() - Play the audio region from the start to end position.update(options) - Modify the settings of the region.Whether to loop the region when played back. The end position of the region (in seconds). The start position of the region (in seconds). disableDragSelection() - Disables ability to create regions.options are Region objects' params (see below). enableDragSelection(options) – Lets you create regions by selecting.Īreas of the waveform with mouse.Note: You cannot add regions until the audio has finished loading, otherwise the start: and end: properties of the new region will be set to 0, or an unexpected value.See Region Options, Region Methods and Region Events below. addRegion(options) – Creates a region on the waveform.To enable the plugin, add the script plugin/ toĪfter doing that, use wavesurfer.addRegion() to create Region objects. Visual customization is possible via CSS (using the selectors

Regions are visual overlays on waveform that can be used to play and region-removed – When a region is removed.region-update-end – When dragging or resizing is finished.region-updated – When a region is updated.region-created – When a region is created.Callback will receive the Region object, and a MouseEvent object. region-dblclick - When the mouse double-clicks on a region.region-click - When the mouse clicks on a region.region-mouseleave - When the mouse leaves a region.We also define listeners to handle user interaction with the player. region-mouseenter - When the mouse moves over a region. const wavesurfer initializeWavesurfer() wavesurfer.load('assets/audio/sample.mp3') We now need to define a few javascript event-listeners to handle setting the volume value of the player.region-out– When playback leaves a region.region-in – When playback enters a region.
