DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
GreggHume
GreggHume

Posted on

Easily record microphone on all devices

I have had an array of issues with mediaRecorder:

  1. Audio doesnt play on all devices or browsers
  2. Audio isnt in a standard format
  3. Audio is blank on some devices like ios

This package saved my life! No data chunks, no converting of files or types, it does it for you:
https://github.com/closeio/mic-recorder-to-mp3

Simple code example:

const MicRecorder = require('mic-recorder-to-mp3');

// New instance
const recorder = new MicRecorder({
  bitRate: 128
});

// Start recording. Browser will request permission to use your microphone.
recorder.start().then(() => {
  // update ui or whatever
}).catch((e) => {
  console.error(e);
});

// Once you are done singing your best song, stop and get the mp3.
recorder.stop().getMp3().then(([buffer, blob]) => {
  // do what ever you want with buffer and blob
  // Example: Create a mp3 file and play
  const file = new File(buffer, 'me-at-thevoice.mp3', {
    type: blob.type,
    lastModified: Date.now()
  });

  const player = new Audio(URL.createObjectURL(file));
  player.play();

}).catch((e) => {
  alert('We could not retrieve your message');
  console.log(e);
});
Enter fullscreen mode Exit fullscreen mode

Beats working with mediaRecorder directly. Thanks closeio, you make us devs look like we know what we are doing.

Top comments (2)

Collapse
 
greggcbs profile image
GreggHume Author

With iPhones new security additions it seems web developers could face quite a few challenges in being able to record microphone audio on all devices.

If you have issues let me know.

Collapse
 
atechguy profile image
aTechGuy

Thanks a lot for writing this post - 'Easily record microphone on all devices'

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.