Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit

* Improved delta calculation (resize end)

With the use case that I use this library for, users need to be able to resize the regions. When a region was resized and afterward set back to the min length (f.e. 3.1 sec or in HMSM, which is how we show it, 00:00:03:10) it would stay at 3.12sec (00:00:03:12) or 3.14sec (00:00:03:14) or something, but never go back down all the way to 3.1 (00:00:03:10). With these changes, the length of the region can be set back to 3.10 exactly

* Update: code feedback implemented

* Add: changelog entry

Git stats


Failed to load latest commit information.
Latest commit message
Commit time
January 21, 2019 13:16
November 23, 2016 11:06
August 6, 2015 15:02
January 25, 2023 10:50
November 5, 2022 22:13
January 25, 2023 10:50


npm version npm Join the chat at GitPOAP Badge

Interactive navigable audio visualization using Web Audio and Canvas.


See a tutorial and examples on

Browser support

wavesurfer.js works only in modern browsers supporting Web Audio.

It will fallback to Audio Element without graphics in other browsers (IE 11 and lower).


Can the audio start playing before the waveform is drawn?

Yes, if you use the backend: 'MediaElement' option. See here: The audio will start playing as you press play. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform.

Can drawing be done as file loads?

No. Web Audio needs the whole file to decode it in the browser. You can however load pre-decoded waveform data to draw the waveform immediately. See here: (the "Pre-recoded Peaks" section).

API in examples

Choose a container:

<div id="waveform"></div>

Create an instance, passing the container selector and options:

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'

Subscribe to some events:

wavesurfer.on('ready', function () {;

Load an audio file from a URL:



See the documentation on all available methods, options and events on the homepage.


See the upgrade document if you're upgrading from a previous version of wavesurfer.js.

Using with a module bundler

Install Wavesurfer:

npm install wavesurfer.js --save
# or
yarn add wavesurfer.js

Use it with a module system like this:

// import
import WaveSurfer from 'wavesurfer.js';

// commonjs/requirejs
var WaveSurfer = require('wavesurfer.js');

// amd
define(['WaveSurfer'], function(WaveSurfer) {
  // ... code

Related projects

For a list of projects using wavesurfer.js, check out the projects page.


Build Status Coverage Status Size

Install development dependencies:

npm install

Development tasks automatically rebuild certain parts of the library when files are changed (start – wavesurfer, start:plugins – plugins). Start a dev task and go to localhost:8080/example/ to test the current build.

Start development server for core library:

npm run start

Start development server for plugins:

npm run start:plugins

Build all the files. (generated files are placed in the dist directory.)

npm run build

Running tests only:

npm run test

Build documentation with esdoc (generated files are placed in the doc directory.)

npm run doc

If you want to use the VS Code - Debugger for Chrome, there is already a launch.json with a properly configured sourceMapPathOverrides for you.

Editing documentation

The homepage and documentation files are maintained in the gh-pages branch. Contributions to the documentation are especially welcome.

Updating the NPM package

When preparing a new release, update the version in the package.json and have it merged to master. The new version of the package will be published to NPM automatically via GitHub Actions.


The main maintainer: Thijs Triemstra

Many thanks to all the awesome contributors!



This work is licensed under a BSD 3-Clause License.