在JavaScript中将麦克风转成MP3：Microm

jopen 9年前

一个漂亮的库用于在JavaScript中将麦克风转成MP3。

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.

Installation

$ npm install microm

or

$ bower install microm

Usage

Recording and converting the user microphone 

var microm = new Microm();  var mp3 = null;    start();  setTimeout(stop, 1500);    function start() {    microm.startRecording().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    });  });

Under the hood

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

  • How Microm uses that libraries?

    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.

Browser support

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

项目主页：http://www.open-open.com/lib/view/home/1448374352063