Interactive navigable audio visualization using Web Audio and Canvas.
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.
Can the audio start playing before the waveform is drawn?
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.
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: https://wavesurfer-js.org/example/audio-element/ (the "Pre-recoded Peaks" section).
Is wavesurfer.js ES6-compatible?
ES6 refactoring is going on in the
next branch. In the meanwhile, you can import wavesurfer.js as an ES6 module via WebPack as described here.
API in examples
Choose a container:
Create an instance, passing the container selector and options:
var wavesurfer = WaveSurfer;
Subscribe to some events:
Load an audio file from a URL:
For a list of projects using wavesurfer.js, check out the projects page.
grunt-cli using npm:
npm install -g grunt-cli
Install development dependencies:
Build a minified version of the library and plugins. This command also checks for code-style mistakes and runs the tests:
Generated files are placed in the
Running tests only:
Creating a coverage report:
The HTML report can be found in
The homepage and documentation files are maintained in the
gh-pages branch. Contributions to the documentation are especially welcome.
This work is licensed under a Creative Commons Attribution 3.0 Unported License.