CODEWITHSUNDEEP
javascripthtmlmp3wavweb-audio-api
Light
Light

Reputation: 1677

Web Audio API - record to MP3?

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?

Upvotes: 25

Views: 20612

Answers (7)

Mud
Mud

Reputation: 28991

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.

Upvotes: 1

oliverbachmann
oliverbachmann

Reputation: 133

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.

Upvotes: 1

denis.peplin
denis.peplin

Reputation: 9831

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.

Upvotes: 2

Sam
Sam

Reputation: 1055

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

Upvotes: 2

Alex Zhukov
Alex Zhukov

Reputation: 256

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

Upvotes: 10

Ich
Ich

Reputation: 1378

Encoding into smaller formats is currently only supported by Firefox:

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.

Upvotes: 1

cwilso
cwilso

Reputation: 13908

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.

Upvotes: 13

Related Questions