Record Your MIC with JavaScript

Learn how to use JavaScript to record your voice and download it as an MP3, OGG, or similar audio file. In this video, we use the Media API to get access to the microphone.
Google Icons: fonts.google.com/icons
// INTERESTED IN GAME DEV?
/ muddywolf
// FOLLOW ME ON TWITTER
/ tyler_potts_
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@matc.1570]

Brilliant tutorial! Thanks for sharing your javascript skills with us 😊

[@almogmizrahi5273]

Where is the code .😢

[@CodingFire]

you are underrated man! keep up the great work

[@TylerPotts]

Thanks, will do!

[@Crashman1012]

Glad to see you’re still uploading awesome tutorials. Your tutorials helped me get a job and what stands out from the rest is that you make projects that are actually what you will work on professionally. For example, no company will hire you to make a to do list or a calculator but they might hire you to make a project that involves using your webcam or audio and doing something with that. Thanks and keep killing it!

[@TylerPotts]

Thank you and that's amazing I'm happy that I could help!

[@RizaHariati]

Very clear and easy to understand.. Thank you!

[@TylerPotts]

You are welcome!

[@ironF5]

everything works, and the details you have provided is excellent. however using flask when i deploy this app on the server, then the mic permission prompt doesnot comes, on deeper research i found that "Modern browsers require a secure context (HTTPS) to grant access to media devices. When you run the app locally, it's likely on HTTP, but your browser may allow microphone access due to it being a 'localhost' environment, which is often considered secure by default. However, when deployed on a server and accessed over the internet, HTTPS becomes mandatory for such features.", so how to deploy this app on server should have also been taught. thank you. excellent content btw

[@user-ei7is2wk5y]

it's not work for me because i facing a problem " cors requests are made on supported schemes" whenever i import the stream from "node:stream";

[@user-cv9sq7xv4s]

Good tutorial, but there is the problem - if you even stop the recording, the browser tab still has that red dot, which means that the tab is still listening to the mic. And that's not good.

[@swadeepsoni514]

bro there is some issue with the recorded file, as suppose if i record for a minute, so whenever i play the recording it will not give me the option to seek to different time. pls help with that like i should have all meta property just after stop recording...

[@MPerialWeb]

How long would it take to make the upload tutorial? I'm trying to save in MongoDB with NodeJS, Express and EJS. 🙂

[@aljosaskrinjar3740]

I know I am late to the party, but are there any videos to continue this project, or is this a solo-standing video.

[@majesticflyingbrick]

why does the progress bar not work when you play the downloaded audio file? is there a way to fix this?

[@srinivasang8363]

Hi, I'm using angular17 but I'm getting below error, can you please help me. TypeError: Cannot read properties of undefined (reading 'recorder') at setUpStream

[@michaeldavid6100]

why not just drop a link to the git repo? rather than make someone write CSS.

[@yogyyconst]

to remove mic icon add this before/after recorder.stop() recorder.stream.getTracks().forEach((t) => t.stop())