WaveSurfer

The library version number is available as a static property of the WaveSurfer class

Example:

console.log('Using wavesurfer.js ' + WaveSurfer.VERSION);

Functions in the util property are available as a static property of the WaveSurfer class

Example:

WaveSurfer.util.style(myElement, { background: 'blue' });

Instantiate this class, call its init function and returns it

Example:

const wavesurfer = WaveSurfer.create(params);

Initialise wavesurfer instance

Override:

Example:

const wavesurfer = new WaveSurfer(params);

Instantiated plugin classes are added as a property of the wavesurfer instance

Properties defined in a plugin definition's staticProps property are added as staticProps properties of the WaveSurfer instance

Get the current ready status.

Example:

const isReady = wavesurfer.isReady;

Functions in the util property are available as a prototype property to all instances

Example:

const wavesurfer = WaveSurfer.create(params);
wavesurfer.util.style(myElement, { background: 'blue' });

Add a plugin object to wavesurfer

Emit:

Example:

wavesurfer.addPlugin(WaveSurfer.minimap());

Cancel any fetch request currently in progress

Remove events, elements and disconnect WebAudio nodes.

Emit:

Destroy a plugin

Emit:

Example:

wavesurfer.destroyPlugin('minimap');

Display empty waveform.

Save waveform image as data URI.

The default format is image/png. Other supported types are image/jpeg and image/webp.

Exports PCM data into a JSON array and optionally opens in a new window as valid JSON Blob instance.

Get a map of plugin names that are currently initialised

Example:

wavesurfer.getPlugins();

Get the background color of the waveform container.

Get the current playback position

Example:

const currentTime = wavesurfer.getCurrentTime();

Get the fill color of the cursor indicating the playhead position.

Get the duration of the audio clip

Example:

const duration = wavesurfer.getDuration();

Get the list of current set filters as an array.

Filters must be set with setFilters method first

Get the height of the waveform.

Get the current mute status.

Example:

const isMuted = wavesurfer.getMute();

Get the playback rate.

Get the fill color of the waveform behind the cursor.

Get the playback volume.

Get the fill color of the waveform after the cursor.

Initialise the wave

Example:

var wavesurfer = new WaveSurfer(params);
wavesurfer.init();

Initialise a plugin

Emit:

Example:

wavesurfer.initPlugin('minimap');

Get the current playback state

Example:

const isPlaying = wavesurfer.isPlaying();

Loads audio and re-renders the waveform.

Throw:

Example:

// uses fetch or media element to load file (depending on backend)
wavesurfer.load('http://example.com/demo.wav');

// setting preload attribute with media element backend and supplying
// peaks
wavesurfer.load(
  'http://example.com/demo.wav',
  [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888],
  true
);

Loads audio data from a Blob or File object

Example:

Stops and pauses playback

Example:

wavesurfer.pause();

Starts playback from the current position. Optional start and end measured in seconds can be used to set the range of audio to play.

Emit:

Example:

// play from second 1 to 5
wavesurfer.play(1, 5);

Toggle playback

Example:

wavesurfer.playPause();

Add and initialise array of plugins (if plugin.deferInit is falsey), this function is called in the init function of wavesurfer

Emit:

Seeks to a position and centers the view

Example:

// seek and go to the middle of the audio
wavesurfer.seekTo(0.5);

Seeks to a position

Emit:

Example:

// seek to the middle of the audio
wavesurfer.seekTo(0.5);

Set the background color of the waveform container.

Example:

wavesurfer.setBackgroundColor('#FF00FF');

Set the current play time in seconds.

Set the fill color of the cursor indicating the playhead position.

Example:

wavesurfer.setCursorColor('#222');

Hide channels from being drawn on the waveform if splitting channels.

For example, if we want to draw only the peaks for the right stereo channel:

const wavesurfer = new WaveSurfer.create({...splitChannels: true}); wavesurfer.load('stereo_audio.mp3');

wavesurfer.setFilteredChannel([0]); <-- hide left channel peaks.

Set the height of the waveform.

Example:

wavesurfer.setHeight(200);

Enable or disable muted audio

Emit:

Example:

// unmute
wavesurfer.setMute(false);
console.log(wavesurfer.getMute()) // logs false

Set a point in seconds for playback to stop at.

Set the playback rate.

Example:

wavesurfer.setPlaybackRate(2);

Set the fill color of the waveform behind the cursor.

Example:

wavesurfer.setProgressColor('#400');

Sets the ID of the audio device to use for output and returns a Promise.

Set the playback volume.

Emit:

Set the fill color of the waveform after the cursor.

Example:

wavesurfer.setWaveColor('#ddd');

Skip a number of seconds from the current position (use a negative value to go backwards).

Example:

// go back 2 seconds
wavesurfer.skip(-2);

Skip backward

Example:

wavesurfer.skipBackward();

Skip forward

Example:

wavesurfer.skipForward();

Stops and goes to the beginning.

Example:

wavesurfer.stop();

Toggle mouse interaction

Example:

wavesurfer.toggleInteraction();

Toggle the volume on and off. If not currently muted it will save the current volume value and turn the volume off. If currently muted then it will restore the volume to the saved value, and then rest the saved value.

Example:

wavesurfer.toggleMute();

Toggles scrollParent and redraws

Example:

wavesurfer.toggleScroll();

Horizontally zooms the waveform in and out. It also changes the parameter minPxPerSec and enables the scrollParent option. Calling the function with a falsey parameter will reset the zoom state.

Emit:

Example:

wavesurfer.zoom(20);