wavesurfer.js + Microphone

wavesurfer.js Microphone Plugin

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

Installation

  1. add the Microphone plugin script tag
  2. create a WaveSurfer instance
  3. create a Microphone instance
  4. control the Microphone using the start, stop and togglePlay methods

Download the plugin (3.2 KB)

Quick Start

var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
  container     : '#waveform',
  waveColor     : 'black',
  interact      : false,
  cursorWidth   : 0
});

var microphone = Object.create(WaveSurfer.Microphone);

microphone.init({
    wavesurfer: wavesurfer
});

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

// start the microphone
microphone.start();

// pause rendering
//microphone.togglePlay();

// stop and disconnect microphone
//microphone.stop();


Options

Name Required Description
wavesurfer yes A WaveSurfer instance.

Events

Name Description
deviceReady Invoked when the device is ready to use. Callback will receive a LocalMediaStream 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