wavesurfer.js

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

Based on Eiji Kitamura's work.

With help from Alex Khokhulin. Thanks!

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(targetEl);

HTML5 Audio backend

You can also generate the waveform images on server and use them in combination with HTML5 Audio, which enjoys wide browser support (as opposed to WebAudio).

See examples/ex.fm for an API usage example.

License

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