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 a cute HTML5 audio player or a sophisticated DJ application.


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


Download wavesurfer.min.js (18 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 README.

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.

  • 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.

Fork me on GitHub