wavesurfer.js

!npm 

Interactive navigable audio visualization using Web Audio and Canvas.


See a tutorial and examples on wavesurfer-js.org.

Browser support

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

It will fallback to Audio Element in other browsers (without graphics). You can also try wavesurfer.swf which is a Flash-based fallback.

FAQ

$3

Yes, if you use the backend: 'MediaElement' option. See here: https://wavesurfer-js.org/example/audio-element/. 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.

$3

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: https://wavesurfer-js.org/example/audio-element/ (the "Pre-recoded Peaks" section).

API in examples

Choose a container:
``html



`
Create an instance, passing the container selector and options:

`javascript
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
`

Subscribe to some events:

`javascript
wavesurfer.on('ready', function () {
wavesurfer.play();
});
`

Load an audio file from a URL:

`javascript
wavesurfer.load('example/media/demo.wav');
`

Documentation

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

Upgrade

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

Using with a module bundler

Wavesurfer can be used with a module system like this:
`javascript
// 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.

Development

![Build Status](https://travis-ci.org/katspaugh/wavesurfer.js)
![Coverage Status](https://coveralls.io/github/katspaugh/wavesurfer.js)
!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.

Credits

Initial idea by Alex Khokhulin. Many
thanks to
the awesome contributors!

License


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