Recording Audio from Microphone with Web Audio

 

This demo uses the Web Audio API to capture audio from the microphone, display a frequency spectrogram and capture the audio in a recording for playback.

Recording is not directly supported in the API, so you need to capture consecutive samples into your own buffer. This can then be used as an input source during playback.

 


Turn off the microphone

 

See the code for more comments - note that the recording buffer is a Float32Array which you need to grow every time you add a new sample

In order to play the recording you need to create a BufferSource node and copy the recording to it's buffer every time you play the audio

Recorder.js by Matt Diamond is a more packaged approach to recording that allows you to download the recording as a WAV file. This uses web workers to improve performance, which is a great idea, but it makes the code harder to follow if you are getting started with web audio.

As of July 2013 the demo only works in Google Chrome. The demo must be hosted on a server - it will not work if you open the page as a file.

To avoid the requests to access the microphone you can use this alternate https link

 

This demo was created by Robert Jones of Craic Computing and is freely distributed under the terms of the MIT license.

This spectrogram in this demo was based on the excellent tutorial Exploring the HTML5 Web Audio: visualizing sound by Jos Dirksen.