Home Reference Source
import RegionsPlugin from 'wavesurfer.js/src/plugin/regions/index.js'
public class | source

RegionsPlugin

Extends:

Observer → RegionsPlugin

Implements:

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

Example:

// es6
import RegionsPlugin from 'wavesurfer.regions.js';

// commonjs
var RegionsPlugin = require('wavesurfer.regions.js');

// if you are using <script> tags
var RegionsPlugin = window.WaveSurfer.regions;

// ... initialising wavesurfer with the plugin
var wavesurfer = WaveSurfer.create({
  // wavesurfer options ...
  plugins: [
    RegionsPlugin.create({
      // plugin options ...
    })
  ]
});

Static Member Summary

Static Public Members
public static

regions: *

Static Method Summary

Static Public Methods
public static

Regions plugin definition factory

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

list: {}

public
public
public

params: *

public
public

util: {...undefined: Object, "getRegionSnapToGridValue": *}

public
public
public

wrapper: *

Method Summary

Public Methods
public

add(params: object): Region

Add a region

public

clear()

Remove all regions

public
public
public

enableDragSelection(params: *)

public

getCurrentRegion(): Region

Get current region

public

Match the value to the grid, if required

public

init()

Inherited Summary

From class Observer
public
public

fireEvent(event: string, args: ...any)

Manually fire an event

public

Attach a handler function for an event.

public

once(event: string, handler: function): ListenerDescriptor

Attach a handler to an event.

public

Disable firing a list of events by name.

since 4.0.0
public

un(event: string, fn: function)

Remove an event handler.

public

unAll()

Remove all event handlers.

Static Public Members

public static regions: * source

Static Public Methods

public static create(params: RegionsPluginParams): PluginDefinition source

Regions plugin definition factory

This function must be used to create a plugin definition which can be used by wavesurfer to correctly instantiate the plugin.

Params:

NameTypeAttributeDescription
params RegionsPluginParams

parameters use to initialise the plugin

Return:

PluginDefinition

an object representing the plugin

Public Constructors

public constructor() source

Instantiate Observer

Override:

Observer#constructor

Public Members

public list: {} source

public maxRegions: * source

public orientation: * source

public params: * source

public regionsMinLength: * source

public util: {...undefined: Object, "getRegionSnapToGridValue": *} source

public vertical: * source

public wavesurfer: * source

public wrapper: * source

Public Methods

public add(params: object): Region source

Add a region

Params:

NameTypeAttributeDescription
params object

Region parameters

Return:

Region

The created region

public clear() source

Remove all regions

public destroy() source

public disableDragSelection() source

public enableDragSelection(params: *) source

Params:

NameTypeAttributeDescription
params *

public getCurrentRegion(): Region source

Get current region

The smallest region that contains the current time. If several such regions exist, take the first. Return null if none exist.

Return:

Region

The current region

public getRegionSnapToGridValue(value: number, params: Object): number source

Match the value to the grid, if required

If the regions plugin params have a snapToGridInterval set, return the value matching the nearest grid interval. If no snapToGridInterval is set, the passed value will be returned without modification.

Params:

NameTypeAttributeDescription
value number

the value to snap to the grid, if needed

params Object

the regions plugin params

Return:

number

value

public init() source