17.8: Microphone Input - p5.js Sound Tutorial
HTML-код
- Опубликовано: 30 июл 2024
- In this video, I demonstrate how to use your system microphone as an input to a sketch, controlling elements with the volume. Code: thecodingtrain.com/tracks/sou...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous: • 17.7: ADSR Envelope - ...
🎥 Next: • 17.9: Sound Visualizat...
References:
🔗 p5.sound library: p5js.org/reference/#/librarie...
Related Coding Challenges:
🚂 • Coding Challenge #147:...
Timestamps:
0:00 Introduction
1:03 AudioIn()
2:54 Create a mic variable
4:14 getLevel()
4:53 The volume numbers are very small
5:22 Use the sound level to visualize an ellipse
6:47 Outro
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: ruclips.net/user/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 • Coding Challenges
🎥 • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#sound #microphoneinput #p5js
These videos are fantastic. Thank you for posting them!
Starting at Chrome 70 it seems like we need to add the following:
function touchStarted() { getAudioContext().resume(); }
because it requires some user interaction before the mic level starts working.
Love you Mr. Shiffman, you are very awesome and inspirational!
Where would you add this to make microphone input functional?
Dudeeeeeee finally after hours of troubleshooting why my mic isn't picking something...i finaly found ur comment.. Thnaks a lot
Thanks a lot. I was facing the same problem.
Thank you so much for sharing this!
I think they fixed this, it now works fine.
First time here. Subscribed ASAP. Loved this video and your style. Maintained the interest till the end.
amazing Video don't know why but your Tutorials are the best.
Thank you for posting them!
3:33 give this man his cookies :D
#1 P5 JS Programmer ever!
"Welcome to another video -about audio" :subscribed!
i lovely the end dance hahaha, greetings from Argentina
awesome cheers Daniel
Very very very Nice man
dude you're like soooo fun!
You could probably combine this with a simple frequency analyser and some knowledge of sound stuff to create an even more realistic talking mouth (with overtones and stuff, idk exactly how it works)
This episode is a true classic. Mainly bc of the hat.
is it possible to record audio with responsive ellipses and then have it play back on repeat? thank you!
I tried to use it on a webpage I coded in dreamweaver, when I stream it on the browser It only shows the background. It does work in the j5.js online web code editor. The other two I made a from and insert in the page will work. Could you say wat the problem is?
I need to subscribe !!!
I love your videos, i watch at least 2 on a daily basis! great teacher. Is there a way with p5.js to get intead of mic input, get all the sound going to the speakers? so if i whanted to have a radial frequency analyser that listens after sound from another browser or streaming service? that would be super cool to do! :D
Two? U are a kid.
(sry for my bad english) Hi Daniel, i have a questiion. I want to create a game who get multiple micro inputs for a school project. But for this i need to be able to receive informations from 4 microphones. Fo the moment i can take two audio onputs (via the stereo channel (left & right) )have you an idea how to do it? If i use an external soundcard can i get multiple audio.Line? the documentation who talk about audio.Line are very difficult to understand for me ^^
and thx your lessons are funny to learn :)
Awesome 😍
awesome!
hi Daniel how can i change the recorded voice and add effects to it , is their any library doing that. answer me plz
Is that possible to use microphone Jack as a ir input and decoding its code. If you have any idea please comment
Is it possible to create an integrated voice chat, any voice chat rooms in currencies that the user ships to send gifts and rooms to a live camera similar to the application of Yala free voice chat rooms I asked many about the topic but they are unable
I never realised it was possible to make a Tin Foil Hat in under 2 seconds!! =O
hi man! (thanks you for you video!), how to get the mic input freq() in console.log()???
how can we access the mic and record without using any other libraries ?
I won't lie, I watched this video to find out why Daniel was wearing that tin hat.
its aluminium foil
How can i revord audio and then upload it to the server in web app ??
03:33 give this man his cookies :D
hello there. how can i change color of an ellipse or line for example by mic input?
ex : " var d = map(mic.getLevel(), 0, 0.5, 1, 50); "
for example, i cant assign the variable "d" for the color... because it only accepts numbers...
thank you
Please share the full code through pastebin etc. and then we can help.
Does anyone has this strange issue: I'm using vscode and got the p5.sound.js libary in my working folder. It has it's proper reference in the html-file. But it looks like there is a problem with the p5.sound.js-file itself, because vscode shows a lot of problems in this file (over 400) and I don't know where the problem is.
Can I put a middleware distortion or somekind of reverb, delay on the AudioIn and render the sound?
Thank you for your videos Daniel. You're awesome. (=
hey did you ever find the solution to this? I am looking to delay the recorded audio and then loop it. thanks!
That hat is lit 🔥 😂
what was the point of telling https and http? does it has some link?
OMG you just teach me how to create a Vtuber running on a browser..... thank you :D
How do I get P5.js to only take external microphone input?
Could this be done on processing?
I would like to get input from my sound card... how to do that ? please help
Can you please please help me do this in angular..?
subbed and liked just for that tin hat
If, instead of the microphone, I want to use the speakers as input? Like analyzing in real time the sound from some electronic instruments I'm playing from my computer without requiring to record them from a microphone (directly from the sound card, I think , but I'm not an expert), to avoid interferences, voices, noise, especially in live shows.
I've found some discussion, but I haven't figure it out yet
forum.processing.org/two/discussion/14184/using-speaker-output-as-input-for-p5-sound-js
github.com/processing/p5.js-sound/issues/221
processing.org/discourse/beta/num_1229300351.html
stackoverflow.com/questions/24588279/processing-getting-the-volume-of-a-playing-sound-file-in-processing
I think being able to analyze the sound from the "speakers" (the one in output from the computer) easily would be much more useful than analyzing the one from the microphone, expecially for musicians.
PS: also a solution for Processing instead of p5 would be good too.
i have kinda the same problem. trying to use ableton lives output as an input for processing. have you figured it out yet? i am grateful for any suggestions on this one..
can i get this in python
2022 here, anyone else only sees a black square? I´ve tried on two different systems and I only get that.
Can somebody explain the Foil Hat to me?
Unfortunately, you are now unable to use a local connection to work with mic inputs....chrome won't let me use it...now i will have to pay for a https website...
You can host on github, gitlab, firebase, etc. for free. All these are reliable options for hobby/small sites. I'm sure there are other free options out there.
Yeah, i used 000webhost for free hosting. But while devloping the website i used Firefox. It let me use the mic even locally.
Locally is not a problem. Chrome also allows mic on localhost.
I didn't work for me when i tried to do it with Chrome. It just simply blocked the mic without even asking me. Maybe i could changed some settings to get it to work, but i just felt using firefox was much easier.
Would this work on mobile?
yes
I don’t get it, why the tin foil ? just for funsies ?
YES
nice tinfoil hat bro
I'm subscribe to this channel but i dont't speak english and this does not subtitle. Good luck whit tour channel ;)
What language do you speak?
Asif Mehedi Spanish
The videos are getting very popular. I'm sure some people will soon start making the subtitles in Spanish. Meanwhile, you can try to follow the code that Dan shares in GitHub.
This could have been more algorithmic
Are you a ballet dancer by any chance?
I wish!
Daniel would make a good smurf. Like if you agree.
+1
Seeccoonnddd
I'm working with the p5 play library using the virtual camera. Can you do a video on how to use the sound library's audioIn with movie sprites? sort of like how this game uses soundruclips.net/video/hhv5P4AfjPA/видео.html
hahahaa
I expected shouting, was disapointed
first
Readmore
I clicked Read More
Read More
Then this came along.
Show less