wavesurfer.js

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
audioContext object none Use your own previously initialized AudioContext or leave blank.
audioRate float 1 Speed at which to play audio. Lower number is slower.
backend string WebAudio WebAudio or MediaElement. In most cases you don't have to set this manually. MediaElement is a fallback for unsupported browsers.
barHeight number 1 Height of the waveform bars. Higher number than 1 will increase the waveform bar heights.
barWidth number none If specified, the waveform will be drawn like this: ▁ ▂ ▇ ▃ ▅ ▂
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.
fillParent boolean true Whether to fill the entire container or draw only according to minPxPerSec.
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.
interact boolean true Whether the mouse interaction will be enabled at initialization. You can switch this parameter at any time later on.
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.
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.
pixelRatio integer window.devicePixelRatio Can be set to 1 for faster rendering.
progressColor string #555 The fill color of the part of the waveform behind the cursor.
renderer string Canvas The renderer object used to draw the waveform. The MultiCanvas renderer can be used to render waveforms that cannot fit on a single canvas due to browser limitations.
responsive boolean true By default the waveform will be responsive on resize and device orientation change. You may set this parameter to false which will disable the responsive waveform.
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.
waveColor string #999 The fill color of the waveform after the cursor.
autoCenter boolean true If a scrollbar is present, center the waveform around the progress
Fork me on GitHub