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

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

Thanks!