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
fileNameString
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
eventNameString
Returns void
Attach an event handler function for event name
Parameters
eventNameStringhandlerFunction
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent