WaveSurfer Options

This is the list of parameters you can pass to var wavesurfer = WaveSurfer.create({ ... }) to create an instance of the player.

option type default description
audioRate float 1 Speed at which to play audio. Lower number is slower.
audioContext object none Use your own previously initialized AudioContext or leave blank.
audioScriptProcessor object none Use your own previously initialized ScriptProcessorNode or leave blank.
autoCenter boolean true If a scrollbar is present, center the waveform around the progress.
backend string WebAudio WebAudio, MediaElement or MediaElementWebAudio. MediaElement is a fallback for unsupported browsers.
backgroundColor string none Change background color of the waveform container.
barGap number none The optional spacing between bars of the wave, if not provided will be calculated in legacy format.
barHeight number 1 Height of the waveform bars. Higher number than 1 will increase the waveform bar heights.
barMinHeight number null Minimum height to draw a waveform bar. Default behavior is to not draw a bar during silence.
barRadius number 0 The radius that makes bars rounded.
barWidth number none If specified, the waveform will be drawn like this: ▁ ▂ ▇ ▃ ▅ ▂
closeAudioContext boolean false Close and nullify all audio contexts when the destroy method is called.
container mixed none CSS-selector or HTML-element where the waveform should be drawn. This is the only required parameter.
cursorColor string #333 The fill color of the cursor indicating the playhead position.
cursorWidth integer 1 Measured in pixels.
drawingContextAttributes object {desynchronized: true} Specify canvas 2d drawing context attributes.
fillParent boolean true Whether to fill the entire container or draw only according to minPxPerSec.
forceDecode boolean false Force decoding of audio using web audio when zooming to get a more detailed waveform.
height integer 128 The height of the waveform. Measured in pixels.
hideScrollbar boolean false Whether to hide the horizontal scrollbar when one would normally be shown.
hideCursor boolean false Hide the mouse cursor when hovering over the waveform. By default it will be shown.
interact boolean true Whether the mouse interaction will be enabled at initialization. You can switch this parameter at any time later on.
loopSelection boolean true (Use with regions plugin) Enable looping of selected regions.
maxCanvasWidth integer 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. This parameter is only applicable to the MultiCanvas renderer.
mediaControls boolean false (Use with backend MediaElement) this enables the native controls for the media element.
mediaType string audio 'audio' or 'video'. Only used with backend MediaElement.
minPxPerSec integer 50 Minimum number of pixels per second of audio.
normalize boolean false If true, normalize by the maximum peak instead of 1.0.
partialRender boolean false Use the PeakCache to improve rendering speed of large waveforms.
pixelRatio integer window.devicePixelRatio Can be set to 1 for faster rendering.
plugins array [] 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 #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.
regionsMinLength number null Default minLength for regions, in seconds. When creating a region, specifying the minLength parameter for that region will override this.
removeMediaElementOnDestroy boolean 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 MultiCanvas Can be used to inject a custom renderer.
responsive boolean or float 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.
scrollParent boolean false Whether to scroll the container with a lengthy waveform. Otherwise the waveform is shrunk to the container width (see fillParent).
skipLength float 2 Number of seconds to skip with the skipForward() and skipBackward() methods.
splitChannels boolean false Render with seperate waveforms for the channels of the audio.
splitChannelsOptions object {} Split channel options. Only applied when splitChannels=true. See below for options
splitChannelsOptions.overlay boolean false Overlay waveforms for channels instead of rendering them on separate rows
splitChannelsOptions.relativeNormalization boolean false Normalization maintains proportionality between channels. Only applies when normalize=true
splitChannelsOptions.filterChannels array [] List of channel numbers to be excluded from rendered waveforms. Channels are 0-indexed
splitChannelsOptions.channelColors object {} Overrides color per channel. Each key indicates a channel number and the corresponding value is an object describing it's color porperties. For example: channelColors={ 0: { progressColor: 'green', waveColor: 'pink' }, 1: { progressColor: 'orange', waveColor: 'purple' } }
waveColor string #999 The fill color of the waveform after the cursor.
xhr Object {} XHR options. For example: let xhr = { cache: 'default', mode: 'cors', method: 'GET', credentials: 'same-origin', redirect: 'follow', referrer: 'client', headers: [ { key: 'Authorization', value: 'my-token' } ]};
Fork me on GitHub