wavesurfer.js

Interactive navigable audio visualization using WebAudio (or <audio> element with pre-generated graphics) and Canvas.

API in examples

Create an instance:

var wavesurfer = Object.create(WaveSurfer);

Initialize it with a canvas element (plus some options):

wavesurfer.init({
    canvas: document.querySelector('#wave'),
    waveColor: 'violet',
    progressColor: 'purple'
});

Load an audio file from a URL (via XHR):

wavesurfer.load('media/sonnet_23.mp3');

There is also a method to visualize drag'n'dropped audio files:

wavesurfer.bindDragNDrop(document.body);

HTML5 Audio backend

You can also generate the waveform images on server and use them in combination with HTML5 Audio, which enjoys wider browser support.

See examples/ex.fm.

Credits

• Based on Eiji Kitamura's work.

• Invaluable advice from Alex Khokhulin.

• Advice from Max Goodman.

• Speed greatly optimised by Kevin Ennis.

• Many cool features contributed by Justin Bradford.

Thanks!

License

This work is licensed under a Creative Commons Attribution 3.0 Unported License.