wavesurfer.js

Drag'n'drop your favorite -file here!

WebAudio Waveform Visualizer

Customizable waveform audio visualzation built on top of WebAdio and HTML5 Canvas (plus, optional SVG renderer). With wavesurfer.js you can assemble a full-featured HTML5 audio player or create a sophisticated DJ application.

Compatibility

wavesurfer.js runs on modern browsers supporting WebAudio. Including Firefox, Chrome, Safari, Mobile Safari and Opera.

Download

Download wavesurfer.min.js (15 KB)

Quick Start

var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
    container: document.querySelector('#wave'),
    waveColor: 'violet',
    progressColor: 'purple'
});

wavesurfer.on('ready', function () {
    wavesurfer.play();
});

wavesurfer.load('example/media/demo.mp3');

Documentation

The full list of options and methods can be found in README.


Plugins

Thanks to open API (everything is public) it's easy to write wavesurfer.js plugins.

  • ELAN plugin

    Reads ELAN files and displays audio annotations as an interactive widget. ELAN is parsed into a JavaScript object (quite literally) plus some denormalization. See an example here: http://wavesurfer.fm/example/elan.

Fork me on GitHub