wavesurfer.js

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:

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></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.

💡 ES6 support

If you're using ES6 and modules, please try our version 2 beta which is rewritten in ES6:

npm install --save [email protected]

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.