wavesurfer.js is a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas.

With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application.

Quick start

In HTML, include the minified script:
Create a container where the waveform is to appear:
<div id="waveform"></div>
In your JavaScript app, create a wavesurfer instance, passing the container selector along with some options:
var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});
Finally, load the audio:
wavesurfer.load('audio.wav');
Checkout out our small tutorial. For the full reference, there's documentation on all parameters, methods and events.

If you have questions or you found a bug, feel free to contact us.

Enjoy your experience with wavesurfer.js!

Browser support

wavesurfer.js runs on modern browsers supporting Web Audio, including Firefox, Chrome, Safari (desktop and mobile) and Opera.

     

Fork me on GitHub