Web Audio API - record to MP3?

Question

I am asking because I couldn't find the answer anywhere. I have successfully implemented RecorderJS in order to record microphone input in JS. However, the recorded file is WAV which results in large files. I am looking for a way to record with JS directly to MP3, or encode the bits somehow to MP3 instead of WAV.

How can it be done? Is there a Web Audio API function that can do that or JS MP3 encoder of some sort?

Nicely

I only know of the other way round decoding, meaning going from MP3 to WAV - github.com/audiocogs/mp3.js. You will probably need to dig into github.com/kripken/emscripten to get a wav to mp3 encoder in JS. – Mccartan

Thanks, I am looking into Emscripten but I still don't see how it can help. – Nicely

Well you need to get some C-Written wav-mp3 decoder, and than decode wav into mp3 in the browser :) – Mccartan

Answer 1

The only Javascript MP3 encoder I've seen is https://github.com/akrennmair/libmp3lame-js, which is a port using emscripten. It's supposed to be slow, and I've never used it.

I don't know of any natively-written Javascript MP3 encoders, and encoding is not covered by the Web Audio API.

Luciferous

Answer 2

There's a library written in pure javascript, called lamejs. To encode mp3s from raw audio. It is much faster than emscripten compile of libmp3lame. https://github.com/zhuker/lamejs

Example usage:

lib = new lamejs();
mp3encoder = new lib.Mp3Encoder(1, 44100, 128); //mono 44.1khz encode to 128kbps
samples = new Int16Array(44100); //one second of silence
var mp3 = mp3encoder.encodeBuffer(samples); //encode mp3

Anonym

lamejs worked well for me. It seems to have no trouble keeping up with realtime, eliminating the need for worker threads. I created a test page at my site with a detailed explanation. – Aguste

Answer 3

I was frustrated with this problem, and existing solutions, so I came up with something simpler:

https://github.com/sb2702/audioRecord.js

Usage

Create a recorder object (async because requires user permission)

    Recorder.new(function(recorder){ 

    }); 

Start recording

         recorder.start();        

Stops recording

         recorder.stop();    

Export as mp3

         recorder.exportMP3(function(mp3Blob){ 

            console.log("Here is your blob: " + URL.createObjectURL(mp3Blob));

          });

Mostly based on RecorderJS, but changed some things around to export to mp3 files, and to not have to muck around with AudioContext / navigator.getUs

Literate

Answer 4

I have found a nice library with live demos: MediaStreamRecorder

One of demos is here: Audio Recording

RecordRTC is also can be useful but MSR it seems is easier to start with.

Chaetopod

Answer 5

Encoding into smaller formats is currently only supported by Firefox:

• http://w3c.github.io/mediacapture-record/MediaRecorder.html
• https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Not supported 25.0 (25.0) Not supported Not supported Not supported

AFAIK only OGG is supported. But better OGG than WAV.

Metamorphic

Answer 6

To record mp3 using javascript without any other framework using a web worker, you can use this project: https://github.com/nusofthq/Recordmp3js which is also very well explained here:

http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/

With this, it's also possible to write to a .mp3 file and to make it downloadable.

Nikola

Answer 7

I made an easy-to-use wrapper for lamejs for my project. It records to MP3 in mono or stereo at any bitrate. You just tell it what AudioNode you want to record.

    import { Mp3Recorder } from './Mp3Recorder.mjs';

    let recorder = new Mp3Recorder();

    await recorder.configure(inputAudioNode, channels, bitRate);

    recorder.start();

    recorder.pause();

    recorder.resume();

    let bytes = await recorder.getRecordedSize();

    let mp3 = await recorder.stop();

For instance, to record the user's microphone in mono at 128 kbps:

    const audio = new AudioContext();
    let micStream = await navigator.mediaDevices.getUserMedia({ audio: true })
    const mic = audio.createMediaStreamSource(micStream);

    await recorder.configure(mic, 1, 128);
    recorder.start();
    
    // ...later, when you're ready to stop recording:
    let mp3 = await recorder.stop();

Live demo and source here.

Reber