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.
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!
wavesurfer.js runs on modern browsers supporting Web Audio, including Firefox, Chrome, Safari (desktop and mobile) and Opera.