Drag'n'drop your favorite -file here!

Web Audio Waveform Visualizer

Customizable waveform audio 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. For a list of other projects using wavesurfer.js, check out the wiki where you can also add your own project.


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


Download wavesurfer.min.js (20 KB)

Quick Start

var wavesurfer = Object.create(WaveSurfer);

    container: document.querySelector('#wave'),
    waveColor: 'violet',
    progressColor: 'purple'

wavesurfer.on('ready', function () {



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

Plugins & Examples

Thanks to the everyting-is-public API, it's easy to write wavesurfer.js plugins.

  • Regions plugin

    Adds ability to display and interact with audio regions. Regions are visual overlays that can be resized and dragged around the waveform. You can play back and loop a region.

  • ELAN plugin

    Reads ELAN files and displays audio annotations as an interactive widget. ELAN is parsed into a JavaScript object with some denormalization.

  • Timeline plugin

    Adds a nice simple timeline to your waveform. By Instajams.

  • Microphone plugin

    Visualizes audio input from a microphone. By Thijs Triemstra.

  • Zoom

    Zooming feature can be used with an HTML5 slider.

  • Panner

    Creating a panner with wavesurfer.js is easy-peasy. Follow the 4 steps.

  • Equalizer

    Simple equalizer to demonstrate how to connect multiple filters in chain.

  • Media element

    HTML5 media element fallback for browsers without Web Audio.

  • Split channel waveforms

    Display multiple waveforms, one for each channel, in a single player.

  • AngularJS directive

    Embed wavesurfer.js in an Angular directive.

Fork me on GitHub