• Stars
    star
    880
  • Rank 51,881 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐ŸŽต Beautiful library to convert browser microphone to mp3 in Javascript ๐ŸŽต

Build Status npm version Bower version DEMO

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.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
  });
});

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:

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 String
  • handler 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.

More Repositories

1

focusable

๐Ÿ”ฆ Set a spotlight focus on DOM element adding a overlay layer to the rest of the page
JavaScript
1,073
star
2

react-circle

Renders a svg circle + progress, it just works ๐Ÿ’˜
TypeScript
965
star
3

default-passive-events

Makes {passive: true} by default when EventListenerOptions are supported
JavaScript
359
star
4

chaosocket

๐Ÿ’ฅ Mock WebSockets and create chaos ๐Ÿ’ฅ
JavaScript
255
star
5

react-scroll-shadow

Pure CSS shadow to indicate more content in scrollable area
TypeScript
233
star
6

gh-emoji

Github emoji parsing done right โ˜๏ธ ๐Ÿ™ ๐Ÿ‘† ๐Ÿ‘ ๐Ÿ‘Œ
JavaScript
160
star
7

nodegram

๐Ÿค˜ Simplest Instagram Api library in Javascript
JavaScript
146
star
8

react-video-renderer

Build custom video players effortless
TypeScript
117
star
9

react-resize-observer-hook

ResizeObserver + React hooks
TypeScript
103
star
10

psaux

๐Ÿ“ฆ Process status in Node.js as you've always wanted
JavaScript
92
star
11

video-snapshot

Get snapshots from a video file in the browser ๐ŸŽฅ ๐ŸŒ…
TypeScript
90
star
12

maggie

๐ŸŒ… Get precious image info from an input file
JavaScript
75
star
13

react-keypress

๐Ÿ”ฅ multi Keypress detection handlers for React.js
JavaScript
61
star
14

run-when

Run tasks based on "Git diff" changes ๐Ÿƒ โž• โž–
JavaScript
61
star
15

react-cute

Render cute JSON in React
TypeScript
54
star
16

walter.js

:squirrel: Preload images with a Promise flavor
JavaScript
46
star
17

react-gh-corner

React portals + Github corners + Styled component = ๐Ÿ’˜
TypeScript
38
star
18

animotion

๐Ÿ’ซ Tiny module to listen for animation events in any element ๐Ÿ’ซ
JavaScript
38
star
19

clay

๐Ÿ’ƒ Resize your elements so simply it hurts
JavaScript
35
star
20

growy

โ†ช๏ธ Textarea-like web component which expands as the user types something โ†ฉ๏ธ
JavaScript
34
star
21

wallapop-webapp

๐Ÿ’ˆ Wallapop webapp
JavaScript
32
star
22

react-cristal

Beautiful window manager for React
TypeScript
30
star
23

html5-slug

Copy of the Metal Slug using canvas and javascript
JavaScript
26
star
24

react-assign

Update React state without boilerplate
JavaScript
24
star
25

ts-react-toolbox

Opinionated toolbox boilerplate to create Typescript React components ๐Ÿ› ๐Ÿ“ฆ
TypeScript
23
star
26

ember-delegations

โฌ…๏ธ โžก๏ธ Plugin for delegating ember properties in a very descriptive and easy way
JavaScript
20
star
27

superagent-serializer

Superagent plugin to convert server payload into different cases
JavaScript
18
star
28

react-smart-key

Pass anything as key without re-renders
TypeScript
17
star
29

saffy

๐Ÿ™ Safest way to get and set properties in Javascript
JavaScript
16
star
30

ember-cli-Mutation-Observer

๐Ÿ‘ฝ The easiest way to subscribe to Dom changes in your ember components
JavaScript
12
star
31

browserify-starter-kit

๐Ÿ‘ป A simple boilerplate for writing Javascript using Browserify, Karma.js, PhantomJS and Mocha
JavaScript
12
star
32

rxjs-async-map

Map an observable using an async function with a configurable concurreny level, while preserving element order.
TypeScript
11
star
33

asynz

๐ŸŽฉ Hipster way of load async scripts in the browser
JavaScript
10
star
34

chainable-api

๐Ÿผ Make your API calls chainables!
JavaScript
9
star
35

react-preview-file

Efficient image preview rendering from files โšก
TypeScript
9
star
36

ember-meme-generator

Awesome meme generator made with Ember.js
JavaScript
8
star
37

palindrome

Know if a string is a palindrome using Node.js with C++ native implementation
Python
7
star
38

react-observable-hook

Generic utility to get free updates from a RXJS observable using React hooks
TypeScript
7
star
39

spotyness

๐ŸŽต Spotify + Youtube + Ember.js ๐ŸŽต
JavaScript
7
star
40

observable

๐Ÿ‘€ Native and pure 100% html and javascript template bindings with Object.observe
JavaScript
5
star
41

skatepark.js

Curated set of components built with Skate.js
JavaScript
4
star
42

flat-files

Get a flatten array of dropped files using FileSystem api
TypeScript
4
star
43

runtastic-app

Runtastic loves Ember
JavaScript
4
star
44

react-memo

React.memo polyfill
TypeScript
4
star
45

react-progressive-img

Progressive image rendering made easy ๐Ÿ”ฎ
TypeScript
3
star
46

reactular

Angular directive for render React components
JavaScript
3
star
47

Leaflet.smoothzoom

Fixes the default leaflet zoom on OSX
JavaScript
3
star
48

page-ogtags

Get any website OG tags using Puppeteer
JavaScript
3
star
49

ember-cli-base64-converter

๐ŸŽˆ Convert imageUrl to base64 effortless
JavaScript
3
star
50

react-start-transition

React 18 startTransition polyfill
TypeScript
3
star
51

reemitter

Type safe event emitter
TypeScript
2
star
52

porlabocamuereelpez

Por la boca muere el pez
CSS
2
star
53

relaser

Javascript command line tool for release Node and Bower packages
JavaScript
2
star
54

use-thread

Runs a function in a separate thread by using a Web Worker not blocking UI
TypeScript
2
star
55

node-palindrome-benchmark

Benchmark of palindrome algorithm in Node using Javascript vs C implementation
JavaScript
2
star
56

save-image

Save remote images locally with ease ๐ŸŒˆ๐Ÿ’พ
JavaScript
2
star
57

prototype-tools

Set of utilities for Javascript Objects
JavaScript
2
star
58

chrome-ace-editor

Simple extension for Google Chrome browser that allow to use the "ACE" Javascript editor
JavaScript
2
star
59

audio-cover

Get the cover from an audio file in the browser
TypeScript
2
star
60

stringifile

Stupid module to require file content wrapped in xml tags
JavaScript
2
star
61

react-video-snapshot

Get a video snapshot with ease
1
star
62

react-above

Render children above the current component
1
star
63

heic-preview

Converts HEIC into something the browser can preview
TypeScript
1
star
64

react-zipizape

Read zips with ZipiZape and React
TypeScript
1
star
65

zipizape

Extract zip contents in the browser with ease
TypeScript
1
star
66

best-word

Returns the best word for "Words with friends" game
TypeScript
1
star
67

tacit-dom

virtual DOM implementation just for fun
1
star
68

cake.js

A set of utilities for share and create common components without dependencies
1
star
69

sloth-mode

Make all images lazy by default
1
star
70

effectus

micro reactive state management - just for fun
TypeScript
1
star
71

unsuspense

Suspense like way of accessing data without waiting for its resolution
1
star
72

nooti

Favicon animation
JavaScript
1
star
73

babel-plugin-promote-class-properties

Babel plugin to replace old code taking advantage of ClassProperties feature
JavaScript
1
star
74

react-mounted

Safely perform actions without worrying if the component is mounted
TypeScript
1
star
75

web-stalker-server

Web scrapper server
JavaScript
1
star
76

react-submenu

Unopinionated right click context menu so simple it hurts ๐Ÿ‘บ
TypeScript
1
star
77

ig-stats-client

The UI of ig-stats
TypeScript
1
star
78

zzarcon.github.io

Personal site
TypeScript
1
star
79

file-state-debugger

Chrome extension to debug file states
TypeScript
1
star
80

protobufun

playing with ProtoBuf
1
star
81

page-favicon

Get any website favicon using Puppeteer
JavaScript
1
star
82

zzarcon

Inception
TypeScript
1
star
83

map-marketer

Visualize and interact with markers on a map
TypeScript
1
star
84

url-attrs

Safely extract url query params into an object
TypeScript
1
star
85

react-blanket

Minimalistic Blanket in React, it just works ๐Ÿ’˜
TypeScript
1
star
86

unsplash-client

lightweight, opinionated, type safe, dependency free Unsplash client
TypeScript
1
star
87

react-devrender

Conditionally renders when DevTools are enabled
1
star
88

edyson

๐Ÿ’ก Visually edit any json object - powered by Web Componentsโ„ข๏ธ
JavaScript
1
star
89

xtore

General purpose lib to subscribe and handle state
TypeScript
1
star