Typedef

• nullable: true

Set to true to stop auto init in addPlugin()

• default: true

Hide the cursor when the mouse leaves the waveform

• default: '1px'

The width of the cursor

• default: 'black'

The color of the cursor

• default: '0.25'

The opacity of the cursor

• default: 'solid'

The border style of the cursor

• default: 3

The z-index of the cursor element

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

• default: false

Show the time on the cursor.

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

• default: false

Use true to make the time on the cursor follow the x and the y-position of the mouse. Use false to make the it only follow the x-position of the mouse.

Formats the timestamp on the cursor.

true if called destroy before the ready event fired

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

The location of ELAN XML data

• nullable: true

Set to true to manually call

• nullable: true

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

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

The default wavesurfer initialisation parameters

• default: 'wavesurfer'

Selector or NodeList of elements to attach instances to

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

URL template for the dynamic loading of plugins

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

The name of the event

The callback

The function to call to remove the listener

The time to set the marker at

• nullable: true

An optional marker label

• nullable: true

An optional marker tooltip

• nullable: true

Background color for marker

• nullable: true

"top" or "bottom", defaults to "bottom"

• nullable: true

An HTML element to display instead of the default marker image

• nullable: true

Set marker as draggable, defaults to false

• nullable: true

Determines whether the context menu is prevented from being opened, defaults to false

• nullable: true

Initial set of markers

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.

• nullable: true

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

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

• 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

• default: 1

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

• default: 1

Integer specifying the number of channels for this node's output.

• nullable: true

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

• nullable: true

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

• nullable: true

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

• default: true
• nullable: true

Draw the playhead as a triangle/line

• default: true
• nullable: true

Seeking (via clicking) while playing moves the playhead

• default: true
• nullable: true

Pausing the track returns the seek position to the playhead

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

• nullable: true

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

• nullable: true

Don't initialise plugin automatically

• default: {}

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

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

• default: →random

The id of the region

• default: 0

The start position of the region (in seconds).

• default: 0

The end position of the region (in seconds).

• nullable: true

Whether to loop the region when played back.

• default: true

Allow/disallow dragging the region.

• default: true

Allow/disallow resizing the region.

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

HTML color code.

• nullable: true

Select channel to draw the region on (if there are multiple channel waveforms).

• nullable: true

A set of CSS properties used to style the left and right handle.

• default: false
• nullable: true

Determines whether the context menu is prevented from being opened.

• default: true

Enable/disable tooltip displaying start and end times when hovering over region.

• nullable: true

Enable creating regions by dragging with the mouse

• nullable: true

Regions that should be added upon initialisation

• default: 2

The sensitivity of the mouse dragging

• nullable: true

Snap the regions to a grid of the specified multiples in seconds

• nullable: true

Shift the snap-to-grid by the specified seconds. May also be negative.

• nullable: true

Set to true to manually call

Maximum number of regions that may be created by the user at one time. initPlugin('regions')

Allows custom formating for region tooltip.

• default: '5%
• nullable: true

from container edges' Optional width for edgeScroll to start

Selector of element or element in which to render

• default: 512

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

• default: false

Render with separate spectrograms for the channels of the audio

• default: fftSamples/2

Height of the spectrogram view in CSS pixels

Set to true to display frequency labels.

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

• default: 'hann'

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

• nullable: true

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

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

• default: 0

Min frequency to scale spectrogram.

• default: 12000

Max frequency to scale spectrogram. Set this to samplerate/2 to draw whole range of spectrogram.

• nullable: true

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

• nullable: true

A 256 long array of 4-element arrays. Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.

• default: false

determines whether channels are rendered on top of each other or on separate tracks

• default: {}

object describing color for each channel. Example: { 0: { progressColor: 'green', waveColor: 'pink' }, 1: { progressColor: 'orange', waveColor: 'purple' } }

• default: []

indexes of channels to be hidden from rendering

• default: false

determines whether normalization is done per channel or maintains proportionality between channels. Only applied when normalize and splitChannels are both true.

• default: false

determines if drag selection in regions plugin works separately on each channel or only one selection for all channels

• nullable: false

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

• default: 90

Height of notches in percent

• default: '#c0c0c0'

The colour of the notches that do not have labels

• default: '#000'

The colour of the main notches

• default: '#c0c0c0'

The colour of the secondary notches

• default: '#000'

The colour of the labels next to the main notches

• default: '#000'

The colour of the labels next to the secondary notches

• default: 5

The padding between the label and the notch

• nullable: true

A debounce timeout to increase rendering performance for large files

• default: 'Arial'

• default: 10

Font size of labels in pixels

• nullable: true

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

(sec, pxPerSec) -> label

(pxPerSec) -> seconds between notches

(pxPerSec) -> cadence between labels in primary color

(pxPerSec) -> cadence between labels in secondary color

• nullable: true

Offset for the timeline start in seconds. May also be negative.

• nullable: true

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

• default: null

Use your own previously initialized AudioContext or leave blank.

• default: 1

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

• default: null

Use your own previously initialized ScriptProcessorNode or leave blank.

• default: true

If a scrollbar is present, center the waveform on current progress

• default: 5

If autoCenter is active, rate at which the waveform is centered

• default: false

If autoCenter is active, immediately center waveform on current progress

• default: 'WebAudio'

'WebAudio'|'MediaElement'|'MediaElementWebAudio' In most cases you don't have to set this manually. MediaElement is a fallback for unsupported browsers. MediaElementWebAudio allows to use WebAudio API also with big audio files, loading audio like with MediaElement backend (HTML5 audio tag). You have to use the same methods of MediaElement backend for loading and playback, giving also peaks, so the audio data are not decoded. In this way you can use WebAudio features, like filters, also with audio with big duration. For example: wavesurfer.load(url | HTMLMediaElement, peaks, preload, duration); wavesurfer.play(); wavesurfer.setFilter(customFilter);

• default: null

Change background color of the waveform container.

• default: 1

The height of the wave bars.

• default: 0

The radius of the wave bars. Makes bars rounded

• default: null

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

• default: null

Draw the waveform using bars.

• default: null

If specified, draw at least a bar of this height, eliminating waveform gaps

• default: false

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

• nullable: false

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

• default: '#333'

The fill color of the cursor indicating the playhead position.

• default: 1

Measured in pixels.

• default: {desynchronized:

false} Drawing context attributes.

• default: null

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

• default: true

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

• default: false

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

• default: 128

The height of the waveform. Measured in pixels.

• default: false

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

• default: false

Whether to hide the mouse cursor when one would normally be shown by default.

• default: false

If true, ignores device silence mode when using the WebAudio backend.

• default: true

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

• default: true

(Use with regions plugin) Enable looping of selected regions

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

• default: false

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

• default: 'audio'

(Use with backend MediaElement or MediaElementWebAudio) 'audio'|'video' ('video' only for MediaElement)

• default: 20

Minimum number of pixels per second of audio.

• default: false

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

• default: false

Use the PeakCache to improve rendering speed of large waveforms

• default: window.devicePixelRatio

The pixel ratio used to calculate display

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

• default: '#555'

The fill color of the part of the waveform behind the cursor. When progressColor and waveColor are the same the progress wave is not rendered at all.

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

• default: MultiCanvas

Can be used to inject a custom renderer.

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

• default: false

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

• default: false

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

• default: 2

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

• default: false

Render with separate waveforms for the channels of the audio

• default: {}

Options for splitChannel rendering

• default: false

Render the waveform vertically instead of horizontally.

• default: '#999'

The fill color of the waveform after the cursor.

• default: {}

XHR options. For example: let xhr = { cache: 'default', mode: 'cors', method: 'GET', credentials: 'same-origin', redirect: 'follow', referrer: 'client', requestHeaders: [ { key: 'Authorization', value: 'my-token' } ] };