DEV Community

GreggHume
GreggHume

Posted on

2 1

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.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (3)

Collapse
 
entonman profile image
Entonman • Edited

Dealing with microphone recording can be a real puzzle sometimes, and I totally understand your frustration. It's awesome to hear that you found a solution that works like a charm.
I'll definitely check out that package you mentioned; anything that simplifies the process and saves time is a win for us devs. Plus, it's like having a secret weapon in our coding arsenal!
If you ever need recommendations or info on microphones, there's this cool site I stumbled upon: asmrmicrophones.com/. It's been a game-changer for me when it comes to choosing the right mic for different projects.

Collapse
 
greggcbs profile image
GreggHume

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'

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️