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.