How to encode PCM data to MP3 in JavaScript?

Question 1

I don't have a ton of time right now, so I can't actually download the libraries and put together a test, but I'd start by putting a breakpoint after this line:

var nread = Module.ccall('lame_encode_buffer_ieee_float', 'number', [ 'number', 'number', 'number', 'number', 'number', 'number' ], [ handle, inbuf_l, inbuf_r, channel_l.length, outbuf, BUFSIZE ]) in libmp3lame.js.

Then set up a watch expression for nread. You want to see what that value is, because I'm pretty sure it's the next line (var arraybuf = new ArrayBuffer(nread);) that's throwing.

That might at least give you some insight into what's going on.

I also noticed that the encode_buffer_ieee_float method internally assumes BUFSIZE = 8192. I'm not entirely sure if that's significant or not, but it has me wondering whether or not this method might actually be intended only as a means for encoding individual Mp3 frames rather than buffers of arbitrary length.

Anyway, if you can see what the value of nread is, that should at least get you on the right track toward figuring out what's going on. But it definitely looks like the second and third parameters are intended to be Float32Arrays, so I don't think you're sending the wrong type of arguments.

Question 2

There's a library written in pure javascript, called lamejs. 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

Question 3

I have also the same error

But i solve that by doing this step: Execute init for mp3 web worker mp3worker.init() when you want to start a new recording. It's due to mp3codec value which was null, because you execute sendMessage(command: 'end'); This solution solves your problem ;)

Question 4

I am building on Kevin Ennis's answer, addressing the problem arising from longer duration of wav files, what we have to do is, instead of waiting for all the data to be ready, encode the data as soon as you receive it from onaudioprocess method, the result is encoding becomes lightning fast.

I have combined Recorderjs and speech-to-server here.

the code in put in github.

my modifications,

in recorder.js

var bufferLen = 16384 // line no. 7

in libmp3lame.js

var nread = Module.ccall('lame_encode_buffer_ieee_float', 'number', [ 'number', 'number', 'number', 'number', 'number', 'number' ], [ handle, inbuf_l, inbuf_r, channel_l.length, outbuf, channel_l.length*4 ]); // line no. 62866

and refactored recordWorker.js as

  var WORKER_PATH = 'encoder.js';


var encoder, data=[];    


this.onmessage = function(e){
  switch(e.data.command){
    case 'init':
      init(e.data.config);
      break;
    case 'record':
      record(e.data.buffer);
      break;
    case 'exportMP3':
      exportMP3();
      break;
    case 'clear':
      clear();
      break;
  }
};

function init(config){
    sampleRate = config.sampleRate;
    encoder = new Worker(WORKER_PATH);
    encoder.onmessage = function(e){
    switch(e.data.cmd){
        case 'data' : 
                        var length = e.data.buf.length;
                        for(var i=0;i<length;i++)
                            data.push(e.data.buf[i]);
                        console.log('data = '+e.data.buf);break;
        case 'end' :    
                        var audioBlob = new Blob([new Uint8Array(data)], { type: 'audio/mp3' });
                        self.postMessage(audioBlob);
                        break;
        }  
    }
    encoder.postMessage({
      cmd: 'init',
      config: {
        samplerate: sampleRate,
        channels: 2,
        mode: 1, // setting mode as Stereo.
        bitrate: 64
      }
    });
}

function record(inputBuffer){
      encoder.postMessage({
        cmd: 'encode',
        rbuf: inputBuffer[0],
        lbuf: inputBuffer[1]
      });
}

function exportMP3(){
  encoder.postMessage({cmd: 'finish'});      
}

function clear(){
    data=[];
}

(p.s : if you want, you can merge recordWorker.js and encoder.js into single file)

Question 5

As the above answers made clear, it's obvious that the module call of lame_encode_buffer_ieee_float in the library returns an nread value of -1 indicating that the encoding failed.

It looks like the BUFSIZE variable being passed to both allocate the outbuf buffer as well as then being passed to the encode function is being set to 8192 samples, or a buffer size of 2048 samples. This would do fine for as-you-go encoding, but if you pass it a larger buffer than 2048 samples this will crap out.

The way I solved the issue was by adding this line of code before the outbuf malloc call:

BUFSIZE = channel_l.length * 4;  // add this line
var outbuf = _malloc(BUFSIZE);

As a result BUFSIZE will be passed to the lame_encode_buffer_ieee_float as well and nread will hold the number of data bytes in the resulting encoded buffer.

Hope this might help others that run across this issue in the future!

Question 6

Solved by changing adding the code after startRecording:

  function startRecording() {

    // this code
    var worker = new Worker('js/mp3Worker.js');
    worker.postMessage({
        command: 'init'
    });  
    //    

  }