wavesurfer.js + Microphone

wavesurfer.js Microphone Plugin

Visualizes audio input from a microphone in wavesurfer.js instances.


  1. add the Microphone plugin to the plugins property of the wavesurfer options
  2. create a new instance of wavesurfer by using the create function
  3. control the Microphone using the start, stopDevice, play, pause, stop and togglePlay methods

Download the plugin

Quick Start

var wavesurfer = WaveSurfer.create({
  container     : '#waveform',
  waveColor     : 'black',
  interact      : false,
  cursorWidth   : 0,
  plugins: [

wavesurfer.microphone.on('deviceReady', function(stream) {
    console.log('Device ready!', stream);
wavesurfer.microphone.on('deviceError', function(code) {
    console.warn('Device error: ' + code);

// start the microphone

// pause rendering

// resume rendering

// stop visualization and disconnect microphone

// same as stopDevice() but also clears the wavesurfer canvas

// destroy the plugin


Name Required Default Description
wavesurfer yes A WaveSurfer instance.
bufferSize no 4096 The buffer size in units of sample-frames. If specified, the bufferSize must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384.
constraints no {audio: true, video: false} The constraints parameter is a MediaStreamConstaints object with at least two members: video and audio, describing the media types requested. Either or both must be specified.
numberOfInputChannels no 1 Integer specifying the number of channels for this node's input. Values of up to 32 are supported.
numberOfOutputChannels no 1 Integer specifying the number of channels for this node's output. Values of up to 32 are supported.


Name Description
deviceReady Invoked when the device is ready to use. Callback will receive a MediaStream object that contains the microphone stream.
deviceError Invoked when the user doesn't allow the browser to access the microphone. Callback will receive a (string) error code.
Fork me on GitHub