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.c...
// INTERESTED IN GAME DEV?
/ muddywolf
// FOLLOW ME ON TWITTER
/ tyler_potts_
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@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!

[@felipehernandez7938]

I'm building a pretty similar app and I was blocked on how can I have only one buttton to start and stop the recording. You unlocked my brain, thank you

[@CodingFire]

you are underrated man! keep up the great work

[@TylerPotts]

Thanks, will do!

[@matc.1570]

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

[@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

[@rekguy]

did you solve this?

[@ryostyles6434]

Any idea how can we add a auto stop recording function so that when user stops speaking the audio stops recording?

[@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.

[@MPerialWeb]

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

[@АндрейМарющенко]

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.

[@aleenajesval]

where is the coding section that u use how can i download it and where from i download the code

[@عليسعد-ق1س]

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";

[@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

[@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...

[@majesticflyingbrick]

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

[@ekenefrancis9998]

How can you save the recorded audio in database using php

[@felixwarano]

i need to send it to my server. How can i do this?

[@almogmizrahi5273]

Where is the code .😢

[@yassineabdelouafi]

the code is in video , just try to practice to learn , not copy paste

[@MrCuong-ny3fv]

@@yassineabdelouafi ok ok

[@جوادجیتی]

i have a problem in iphone recording and is error

[@banerjeesiblings1306]

How to record google meeting recordings

[@Mrdefa1]

no github link?

[@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())