DEMO

Beautiful library to convert browser microphone to mp3 in Javascript

Microm it's just a wrapper of few audio converting libraries which exposes a fully Promise and Event oriented api. Microm goal it's to make trivial to play and convert audio in the browser.

$ npm install microm

or

$ bower install microm

Recording and converting the user microphone

var microm = new Microm();
var mp3 = null;

start();
setTimeout(stop, 1500);

function start() {
  microm.record().then(function() {
    console.log('recording...')
  }).catch(function() {
    console.log('error recording');
  });
}

function stop() {
  microm.stop().then(function(result) {
    mp3 = result;
    console.log(mp3.url, mp3.blob, mp3.buffer);

    play();
    download();
  });
}

function play() {
  microm.play();
}

function download() {
  var fileName = 'cat_voice';
  microm.download(fileName);
}

Reacting to events

microm.on('timeupdate', updateCurrentTime);
microm.on('loadedmetadata', onLoaded);
microm.on('play', onPlayEvent);
microm.on('pause', onPauseEvent);
microm.on('ended', onEndEvent);

function onLoaded(time) {
  duration.innerHTML = time;
}

function updateCurrentTime(time) {
  currentTime.innerHTML = time;
}

function onPlayEvent() {
  status.innerHTML = 'Playing';
}

function onPauseEvent(time) {
  status.innerHTML = 'Paused';
}

function onEndEvent() {
  status.innerHTML = 'Ended';
}

Upload mp3 to the server

microm.getBase64().then(function(base64string) {
  $.ajax({
    type: 'POST',
    contentType: 'application/octet-stream',
    mimeType: 'audio/mpeg',
    processData: false,
    url: 'server/upload_audio',
    data: base64string,
    success: onSuccess
  });
});

To achieve that, Microm uses the following libs:

• lamejs mp3 encoder in javascript
• webrtc-adapter Shim to insulate apps from spec changes and prefix differences
• RecordRTC record WebRTC audio/video media streams
• RSVP Provides tools for organizing asynchronous code

In order to get the user recorded data, we use webrtc-adapter + RecordRTC which provides some shims and tools to make it easy and without worry about crossbrowser issues.

Later we use lamejs to convert the Wav to Mp3. We can say that the hard work happen in that lib <3.

And finally to provide a Promise based Api we use RSVP which support the Promises/A+ and have a great support.

The library just work in Chrome and Firefox right now. More info:

• Caniuse Stream
• Caniuse WebRTC
• navigator.getUserMedia deprecation
• navigator.mediaDevices.getUserMedia
• Safari is the new IE

Forces file download.

Parameters

• fileName String

Returns void

Base64 value of the recorded data.

Examples

microm.getBase64().then(function(base64) {
    console.log(base64);
  });

Returns Promise

Blob value of the recorded data.

Returns Blob

ArrayBuffer of the recorded data (raw binary data buffer).

Returns ArrayBuffer

Returns all mp3 info. Right now we are converting the recorded data everytime this function it's called.

Returns Promise

Link to the mp3. It can be used as a audio "src" value

Examples

microm.getUrl();
  // Something like --> "blob:http%3A//localhost%3A8090/8b40fc63-8bb7-42e3-9622-9dcc59e5df8f"

Returns String

Blob enconded as Wav.

Returns Blob

Remove an event handler

Parameters

• eventName String

Returns void

Attach an event handler function for event name

Parameters

• eventName String
• handler Function

Returns void

Pauses the player.

Returns void

Reproduce the player audio.

Returns void

Request browser microphone access and waits for it resolution. If the user grant access, Microm will start recording the audio.

Returns Promise

Stops recording audio if Micron is recording, if not just pauses the player and set's the currentTime to 0.

Examples

microm.stop().then(function(mp3) {
   console.log(mp3.url, mp3.blob);
  });

Returns Promise Will be resolved with the mp3.