Microm
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.
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:
- Caniuse Stream
- Caniuse WebRTC
- navigator.getUserMedia deprecation
- navigator.mediaDevices.getUserMedia
- Safari is the new IE
Api reference
download
Forces file download.
Parameters
fileName
String
Returns void
getBase64
Base64 value of the recorded data.
Examples
microm.getBase64().then(function(base64) {
console.log(base64);
});
Returns Promise
getBlob
Blob value of the recorded data.
Returns Blob
getBuffer
ArrayBuffer of the recorded data (raw binary data buffer).
Returns ArrayBuffer
getMp3
Returns all mp3 info. Right now we are converting the recorded data everytime this function it's called.
Returns Promise
getUrl
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
getWav
Blob enconded as Wav.
Returns Blob
off
Remove an event handler
Parameters
eventName
String
Returns void
on
Attach an event handler function for event name
Parameters
eventName
Stringhandler
Function
Returns void
pause
Pauses the player.
Returns void
play
Reproduce the player audio.
Returns void
record
Request browser microphone access and waits for it resolution. If the user grant access, Microm will start recording the audio.
Returns Promise
stop
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.