Skip to content

Record MP3 (and WAV) files in the browser using JavaScript and HTML


Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit



4 Commits

Repository files navigation


Record MP3 (and WAV) files in the browser using JavaScript and HTML.



The whole project got kicked off by using Recordmp3js - discovered in this wonderful article by Remus - and discovering that my needs were not entirely met. I needed the possibility to have multiple recorders on one site. Also, since the original code was being altered to only reflect the MP3 changes and changing it from stereo to mono, I had the feeling that a lot of unused code has been left in there and I found it difficult to actually see what's going on.


My first idea was to fork the original project, but I soon discovered that I'm going more for a rewrite than a fork. Hence I ended up writing it anew in a different style.


For easy use jQuery and libmp3lame.js are included in this project.



// create an audio context
var audio_context = new AudioContext;

// tell the browser you want to get some audio user media
navigator.getUserMedia({audio: true}, function(stream) {
  // create an MP3Recorder object supplying the audio context and the stream
  var recorderObject = new MP3Recorder(audio_context, stream);
}, function(e) {
  // some error occured

Start recording

On a given MP3Recorder object you can simply call start() to start recording.


Stop recording

On a given MP3Recorder object you can simply call stop() to stop recording.


Retrieving recorded data

On a given MP3Recorder object you can call 3 methods to get the recorded data, depending on which type you need.

As Blob data

recorderObject.exportBlob(function(blobData) {
  // blobData is a Blob object

As WAV data

recorderObject.exportWAV(function(wavData) {
  // wavData is a base64 encoded Uint8Array

As MP3 data

recorderObject.exportMP3(function(mp3Data) {
  // mp3Data is a base64 encoded Uint8Array


If you create the MP3Recorder object with a third parameter you can specify a container and a method to log to.

var recorderObject = new MP3Recorder(audio_context, stream,
  { statusContainer: $('#status'), statusMethod: 'replace' }
  • statusContainer must be a jQuery object that responds to the text() function.
  • statusMethod can be 'append' to append the status text or anything else to replace it.


For a complete example, using multiple recorders on a page, see the index.html file.

Known issues

As mentioned in the article by Remus the resulting mp3 recording will be longer by approximately 50%, which is an issue of the lame library that's being used.

A possible fix for this is mentioned by Nicholas in the comment section.


For the purpose of this project, libmp3lame.js was used which was not developed by me. Using LAME in your project may result in requiring a special patent license for your country. For more information see the LAME project site.


Record MP3 (and WAV) files in the browser using JavaScript and HTML







No releases published


No packages published