Home Reference Source

Typedef

Static Public Summary
public
public
public
public
public

The parameters used to describe a marker.

public
public
public
public

Extends the WavesurferParams wavesurfer was initialised with

public
public

The Object used to describe a plugin

public

The parameters used to describe a region.

public
since 4.0.0 This class has been split
public
public

parameters applied when splitChannels option is true

since 4.3.0
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.

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

formatTimeCallback function

Formats the timestamp on the cursor.

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 request 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 MarkerParams: Object source

The parameters used to describe a marker.

Properties:

NameTypeAttributeDescription
time number

The time to set the marker at

string label
  • nullable: true

An optional marker label

string color
  • nullable: true

Background color for marker

string position
  • nullable: true

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

element markerElement
  • nullable: true

An HTML element to display instead of the default marker image

Example:

wavesurfer.addMarker(regionParams);

public MarkersPluginParams: Object source

Properties:

NameTypeAttributeDescription
markers MarkerParams[]
  • nullable: true

Initial set of markers

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.

numberOfOutputChannels number
  • default: 1

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

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 PlayheadPluginParams: Object source

Properties:

NameTypeAttributeDescription
draw boolean
  • default: true
  • nullable: true

Draw the playhead as a triangle/line

moveOnSeek boolean
  • default: true
  • nullable: true

Seeking (via clicking) while playing moves the playhead

returnOnPause boolean
  • default: true
  • nullable: true

Pausing the track returns the seek position to the playhead

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.

channelIdx number
  • nullable: true

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

handleStyle object
  • nullable: true

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

preventContextMenu boolean
  • default: false
  • nullable: true

Determines whether the context menu is prevented from being opened.

showTooltip boolean
  • default: true

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

Example:

wavesurfer.addRegion(regionParams);

public RegionsPluginParams: Object since 4.0.0 This class has been split 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

snapToGridInterval number
  • nullable: true

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

snapToGridOffset number
  • nullable: true

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

deferInit boolean
  • nullable: true

Set to true to manually call

maxRegions number[]

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

formatTimeCallback function

Allows custom formating for region tooltip.

edgeScrollWidth number
  • default: '5%
  • nullable: true

from container edges' Optional width for edgeScroll to start

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

colorMap number[][]
  • 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.

public SplitChannelOptions: Object since 4.3.0 source

parameters applied when splitChannels option is true

Properties:

NameTypeAttributeDescription
overlay boolean
  • default: false

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

channelColors object
  • default: {}

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

filterChannels number[]
  • default: []

indexes of channels to be hidden from rendering

relativeNormalization boolean
  • default: false

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

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

offset number
  • nullable: true

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

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 on current progress

autoCenterRate number
  • default: 5

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

autoCenterImmediately boolean
  • default: false

If autoCenter is active, immediately center waveform on current progress

backend string
  • 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);

backgroundColor string
  • default: null

Change background color of the waveform container.

barHeight number
  • default: 1

The height of the wave bars.

barRadius number
  • default: 0

The radius of the wave bars. Makes bars rounded

barGap number
  • default: null

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

barWidth number
  • default: null

Draw the waveform using bars.

barMinHeight number
  • default: null

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

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.

drawingContextAttributes object
  • default: {desynchronized:

false} Drawing context attributes.

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.

ignoreSilenceMode boolean
  • default: false

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

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 or MediaElementWebAudio) this enables the native controls for the media element

mediaType string
  • default: 'audio'

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

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. When progressColor and waveColor are the same the progress wave is not rendered at all.

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

splitChannelsOptions SplitChannelOptions
  • default: {}

Options for splitChannel rendering

vertical boolean
  • default: false

Render the waveform vertically instead of horizontally.

waveColor string
  • default: '#999'

The fill color of the waveform after the cursor.

xhr object
  • 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' } ] };