Home Reference Source

Typedef

Static Public Summary
public
public
public
public
public
public
public

Extends the WavesurferParams wavesurfer was initialised with

public

The Object used to describe a plugin

public

The parameters used to describe a region.

public
public
public

Extends the WavesurferParams wavesurfer was initialised with

public

Static Public

public CursorPluginParams: Object source

Properties:

NameTypeAttributeDescription
deferInit boolean
  • nullable: true

Set to true to stop auto init in addPlugin()

hideOnBlur boolean
  • default: true

Hide the cursor when the mouse leaves the waveform

width string
  • default: '1px'

The width of the cursor

color string
  • default: 'black'

The color of the cursor

opacity string
  • default: '0.25'

The opacity of the cursor

style string
  • default: 'solid'

The border style of the cursor

zIndex number
  • default: 3

The z-index of the cursor element

customStyle object

An object with custom styles which are applied to the cursor element

showTime boolean
  • default: false

Show the time on the cursor.

customShowTimeStyle object

An object with custom styles which are applied to the cursor time element.

public ElanPluginParams: Object source

Properties:

NameTypeAttributeDescription
container string | HTMLElement

CSS selector or HTML element where the ELAN information should be rendered.

url string

The location of ELAN XML data

deferInit boolean
  • nullable: true

Set to true to manually call

tiers Object
  • nullable: true

If set only shows the data tiers with the TIER_ID in this map.

public InitParams: Object source

Properties:

NameTypeAttributeDescription
defaults WavesurferParams
  • optional
  • default: {backend: 'MediaElement, mediaControls: true}

The default wavesurfer initialisation parameters

containers string | NodeList
  • default: 'wavesurfer'

Selector or NodeList of elements to attach instances to

pluginCdnTemplate string
  • default: '//localhost:8080/dist/plugin/wavesurfer.[name].js'

URL template for the dynamic loading of plugins

loadPlugin function

If set overwrites the default ajax function, can be used to inject plugins differently.

public ListenerDescriptor: Object source

Properties:

NameTypeAttributeDescription
name string

The name of the event

callback function

The callback

un function

The function to call to remove the listener

public MediaSessionPluginParams: Object source

Properties:

NameTypeAttributeDescription
metadata MediaMetadata

A MediaMetadata object: a representation of the metadata associated with a MediaSession that can be used by user agents to provide a customized user interface.

deferInit boolean
  • nullable: true

Set to true to manually call initPlugin('mediasession')

public MicrophonePluginParams: Object source

Properties:

NameTypeAttributeDescription
constraints MediaStreamConstraints

The constraints parameter is a MediaStreamConstaints object with two members: video and audio, describing the media types requested. Either or both must be specified.

bufferSize number
  • default: 4096

The buffer size in units of sample-frames. If specified, the bufferSize must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384

numberOfInputChannels number
  • default: 1

Integer specifying the number of channels for this node's input. Values of up to 32 are supported.

deferInit boolean
  • nullable: true

Set to true to manually call initPlugin('microphone')

public MinimapPluginParams: Object source

Extends the WavesurferParams wavesurfer was initialised with

Properties:

NameTypeAttributeDescription
container string | HTMLElement
  • nullable: true

CSS selector or HTML element where the map should be rendered. By default it is simply appended after the waveform.

deferInit boolean
  • nullable: true

Set to true to manually call initPlugin('minimap')

public PluginDefinition: Object source

The Object used to describe a plugin

Properties:

NameTypeAttributeDescription
name string

The name of the plugin, the plugin instance will be added as a property to the wavesurfer instance under this name

staticProps Object
  • nullable: true

The properties that should be added to the wavesurfer instance as static properties

deferInit boolean
  • nullable: true

Don't initialise plugin automatically

params Object
  • default: {}

The plugin parameters, they are the first parameter passed to the plugin class constructor function

instance PluginClass

The plugin instance factory, is called with the dependency specified in extends. Returns the plugin class.

Example:

wavesurfer.addPlugin(pluginDefinition);

public RegionParams: Object source

The parameters used to describe a region.

Properties:

NameTypeAttributeDescription
id string
  • default: →random

The id of the region

start number
  • default: 0

The start position of the region (in seconds).

end number
  • default: 0

The end position of the region (in seconds).

loop boolean
  • nullable: true

Whether to loop the region when played back.

drag boolean
  • default: true

Allow/disallow dragging the region.

resize boolean
  • default: true

Allow/disallow resizing the region.

color string
  • optional
  • default: 'rgba(0, 0, 0, 0.1)'

HTML color code.

Example:

wavesurfer.addRegion(regionParams);

public RegionsPluginParams: Object source

Properties:

NameTypeAttributeDescription
dragSelection boolean
  • nullable: true

Enable creating regions by dragging with the mouse

regions RegionParams[]
  • nullable: true

Regions that should be added upon initialisation

slop number
  • default: 2

The sensitivity of the mouse dragging

deferInit boolean
  • nullable: true

Set to true to manually call initPlugin('regions')

public SpectrogramPluginParams: Object source

Properties:

NameTypeAttributeDescription
container string | HTMLElement

Selector of element or element in which to render

fftSamples number
  • default: 512

Number of samples to fetch to FFT. Must be a power of 2.

labels boolean

Set to true to display frequency labels.

noverlap number

Size of the overlapping window. Must be < fftSamples. Auto deduced from canvas size by default.

windowFunc string
  • default: 'hann'

The window function to be used. One of these: 'bartlett', 'bartlettHann', 'blackman', 'cosine', 'gauss', 'hamming', 'hann', 'lanczoz', 'rectangular', 'triangular'

alpha number
  • nullable: true

Some window functions have this extra value. (Between 0 and 1)

pixelRatio number
  • default: wavesurfer.params.pixelRatio

to control the size of the spectrogram in relation with its canvas. 1 = Draw on the whole canvas. 2 = Draw on a quarter (1/2 the length and 1/2 the width)

deferInit boolean
  • nullable: true

Set to true to manually call initPlugin('spectrogram')

public TimelinePluginParams: Object source

Extends the WavesurferParams wavesurfer was initialised with

Properties:

NameTypeAttributeDescription
container string | HTMLElement
  • nullable: false

CSS selector or HTML element where the timeline should be drawn. This is the only required parameter.

notchPercentHeight number
  • default: 90

Height of notches in percent

unlabeledNotchColor string
  • default: '#c0c0c0'

The colour of the notches that do not have labels

primaryColor string
  • default: '#000'

The colour of the main notches

secondaryColor string
  • default: '#c0c0c0'

The colour of the secondary notches

primaryFontColor string
  • default: '#000'

The colour of the labels next to the main notches

secondaryFontColor string
  • default: '#000'

The colour of the labels next to the secondary notches

labelPadding number
  • default: 5

The padding between the label and the notch

zoomDebounce number
  • nullable: true

A debounce timeout to increase rendering performance for large files

fontFamily string
  • default: 'Arial'
fontSize number
  • default: 10

Font size of labels in pixels

duration number
  • nullable: true

Length of the track in seconds. Overrides getDuration() for setting length of timeline

formatTimeCallback function

(sec, pxPerSec) -> label

timeInterval function

(pxPerSec) -> seconds between notches

primaryLabelInterval function

(pxPerSec) -> cadence between labels in primary color

secondaryLabelInterval function

(pxPerSec) -> cadence between labels in secondary color

deferInit boolean
  • nullable: true

Set to true to manually call initPlugin('timeline')

public WavesurferParams: Object source

Properties:

NameTypeAttributeDescription
audioContext AudioContext
  • default: null

Use your own previously initialized AudioContext or leave blank.

audioRate number
  • default: 1

Speed at which to play audio. Lower number is slower.

audioScriptProcessor ScriptProcessorNode
  • default: null

Use your own previously initialized ScriptProcessorNode or leave blank.

autoCenter boolean
  • default: true

If a scrollbar is present, center the waveform around the progress

backend string
  • default: 'WebAudio'

'WebAudio'|'MediaElement' In most cases you don't have to set this manually. MediaElement is a fallback for unsupported browsers.

barHeight number
  • default: 1

The height of the wave

barGap number
  • default: null

The optional spacing between bars of the wave, if not provided will be calculated in legacy format.

closeAudioContext boolean
  • default: false

Close and nullify all audio contexts when the destroy method is called.

container string | HTMLElement
  • nullable: false

CSS selector or HTML element where the waveform should be drawn. This is the only required parameter.

cursorColor string
  • default: '#333'

The fill color of the cursor indicating the playhead position.

cursorWidth number
  • default: 1

Measured in pixels.

duration number
  • default: null

Optional audio length so pre-rendered peaks can be display immediately for example.

fillParent boolean
  • default: true

Whether to fill the entire container or draw only according to minPxPerSec.

forceDecode boolean
  • default: false

Force decoding of audio using web audio when zooming to get a more detailed waveform.

height number
  • default: 128

The height of the waveform. Measured in pixels.

hideScrollbar boolean
  • default: false

Whether to hide the horizontal scrollbar when one would normally be shown.

interact boolean
  • default: true

Whether the mouse interaction will be enabled at initialization. You can switch this parameter at any time later on.

loopSelection boolean
  • default: true

(Use with regions plugin) Enable looping of selected regions

maxCanvasWidth number
  • default: 4000

Maximum width of a single canvas in pixels, excluding a small overlap (2 * pixelRatio, rounded up to the next even integer). If the waveform is longer than this value, additional canvases will be used to render the waveform, which is useful for very large waveforms that may be too wide for browsers to draw on a single canvas.

mediaControls boolean
  • default: false

(Use with backend MediaElement) this enables the native controls for the media element

mediaType string
  • default: 'audio'

(Use with backend MediaElement) 'audio'|'video'

minPxPerSec number
  • default: 20

Minimum number of pixels per second of audio.

normalize boolean
  • default: false

If true, normalize by the maximum peak instead of 1.0.

partialRender boolean
  • default: false

Use the PeakCache to improve rendering speed of large waveforms

pixelRatio number
  • default: window.devicePixelRatio

The pixel ratio used to calculate display

plugins PluginDefinition[]
  • default: []

An array of plugin definitions to register during instantiation, they will be directly initialised unless they are added with the deferInit property set to true.

progressColor string
  • default: '#555'

The fill color of the part of the waveform behind the cursor.

removeMediaElementOnDestroy boolean
  • default: true

Set to false to keep the media element in the DOM when the player is destroyed. This is useful when reusing an existing media element via the loadMediaElement method.

renderer Object
  • default: MultiCanvas

Can be used to inject a custom renderer.

responsive boolean | number
  • default: false

If set to true resize the waveform, when the window is resized. This is debounced with a 100ms timeout by default. If this parameter is a number it represents that timeout.

rtl boolean
  • default: false

If set to true, renders waveform from right-to-left.

scrollParent boolean
  • default: false

Whether to scroll the container with a lengthy waveform. Otherwise the waveform is shrunk to the container width (see fillParent).

skipLength number
  • default: 2

Number of seconds to skip with the skipForward() and skipBackward() methods.

splitChannels boolean
  • default: false

Render with separate waveforms for the channels of the audio

waveColor string
  • default: '#999'

The fill color of the waveform after the cursor.

xhr object
  • default: {}

XHR options.