Code an Audio Visualizer in p5js (from scratch) | Coding Project #17
ฝัง
- เผยแพร่เมื่อ 7 มิ.ย. 2024
- In this project we will code an audio visualizer from scratch with the p5js library. We will be using FFT and waveform analysis.
Content of this video:
0:00 Introduction
0:48 Load the audio
2:23 Waveform analysis
5:58 Wrap the waveform in a circle
8:32 Create the particles
13:57 Beat detection
15:29 Responsive background
18:47 Patreon
If you want to improve your coding skills further, head over to codiwy.com. It is totally free to get started, and there will fresh content available every week.
For more examples of things you can do in p5.js, just head over to Instagram.
/ colorfulcoding
If you don't know how to get started with p5.js, here's a video covering that:
• Get started with p5.js...
Download p5js sound library:
p5js.org/download/
p5.js documentation:
p5js.org/reference/
If you have any questions or requests for future projects, feel free to leave a comment below 👇
The best tutorial so far, please keep producing them 👍
This is so good! Very inspiring and so happy I learned javascript!
This looks amazing! Will try it out with some adjustements :) Thanks for the video
This is awesome!! your explanation is very clear! thanks!
Been looking for these things, you saved me a lot of time :), to put my things in better way.
This is amazing. I'm so happy to find this video👍
That was awesome and works great! Definitely checking your patreon. Thank you!
You're mad talented. Just subbed
Mind Blown.... 😮❤‼
very good explanation for what I needed thx a lot 😁
Great tutorial!
I skipped through the video as i dont have time now, but definitely interesting, informative and cool!
Will definitely check it out in depth! Thanks for the video
Very helpful. Thank you!
Wow 👏😮, I like it, so far so good, it's really fun.+👍
Thank you very much!
Thank you so much, you are amazing.
The awesome tutorial i have found❤❤
Fantastic video tutorial, you help me so more for a job thanks you very much
very good video. thank you
Thank you very much 😉
AWESOME
I followed your tutorial and came last in the class.
Thank you for this awesome video! How did you capture/export the visualizer and turn it into a video?
thanks man
Can I made this animation with a file mp4 instead of mp3? I uploaded I video with some filters but would be interesting adding this sound visualizer and seeing that the animation works contemporary with the music from the video.
is it possible for us to load 2 songs simultaneously and give them different waves to see them reacting differently?
Is there anyway you could make this into an actual program which could visualise audio by inserting a youtube link or something like that, it would be very appreciated as I'm working on this as a school project and need some help
Great video! One question: why does the flickering of particles stop if you loop backwards?
@@bysho thanks for your detailed answer:)
What's a substitute for the class function? I get a parsing error: keyword 'class' is reserved
where did you get this music?
My music file won't play at all. The audio is on the right folder, what might be the issue? Even clicking doesn't work.
hi, thanks for the video. I'm having issues with the update method for the Particle class. nothing syntactically wrong but no particle display. I'm doing this for a react project but the update method doesn't seem to work in my case. only on the p5 editor
i figured out the problem my this.vel was suppose to be p5.Vector.random2D().mult(0).
bro, how you record the screen? Please help me! I want recorde my arts to share
Awesome content man. I was wondering if p5.js can we used in ReactJs project? Not sure , i have a reactjs project and i need to draw some visuals. Please let me know if it can be done
It can be used in reactjs, go for it.
probably difficult, consider using an
Hi man! thanks for this video, how can i find you on patreon
hi can i know why my particles just kept generating even the song was played
How do I make the spikes sharper? Anyways a brilliant tutorial ❤️. Keep it up
You could decrease the number of points in the waveform. That would add some more space between each point and make the spikes sharper :)
this is LIT
So why does my page just say loading.. forever?
May I ask which editor you use to write your p5.js code?
I use Visual Studio Code :)
Hi! i have to stupid questions... is the live preview integrated in your visual studio( somehow cant do that)
and on chrome in the console i cannot execute fft.waveform() VM97:1 Uncaught TypeError: Cannot read properties of undefined (reading 'waveform')
at :1:5
Solved It!
@@andrewperkinson8941 how
i'm getting the error cannot access Particle before initialization
Is this doable in Flutter?
Is it possible to achieve this same thing using python?
How can I fix these errors
Uncaught (in promise) ReferenceError: loadSound is not defined
at preload (assignment2.js:9)
at p5._start (p5.js:62905)
at new p5 (p5.js:63261)
at _globalInit (p5.js:62189)
Uncaught TypeError: Cannot read properties of undefined (reading 'isPlaying')
at mouseClicked (assignment2.js:38)
at p5._main.default._onclick (p5.js:78581)
what is this song, please share a link with me, Thanks
a have a problem, The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
It just means that you cannot directly start the audio from your code. It has to be started by the user gesture, like a click on a button or the canvas
The particles doesn't show up and I am not sure why...
How can this be archived in React.js?
I've been trying to make this, however, when I use the preload function, my whole page gets stuck on Loading.... what should I do?
You are most likely running into some kind of error during the preload function. Have you made any changes to it or is it like the one in the video?
what word to search in petreon
Could this be done with p5.audioIn() and graph the audio from the users microphone in real time?
Definitely! I think thecodingtrain has made a video doing that
@@ColorfulCoding What a fast reply! Thanks a lot.
hi, Can we get the same effect with the mic stream audio data using P5.js?
Yes, you can create a audio stream from the mic like this:
p5js.org/examples/sound-frequency-spectrum.html
Hi, my circle is not meeting at the bottom, there is space in between for some reason, can you please address this ?
i had the same issue and couldn't find the issue to save my life but i ended up randomly messing with the var under the beginShape and by changing the i+= 5 back down to a smaller number like 0.1 it closes the circle !
what software are you using??
It is just code. But I'm working in Visual Studio Code if that is what you mean :)
Thanks, i use Eclipse, but i have visual studio too ☺️
Hey man, I keep getting this error "Cannot read property 'length' of undefined
at RingBuffer.push (f9bb4b58-d2fe-49e9-9dd4-8cb68d6ca98f:75)
and
at AudioWorkletProcessor.process (f9bb4b58-d2fe-49e9-9dd4-8cb68d6ca98f:170)" It seems it's the sounds library but I can't find a fix...
I really want this to work... I tried it without using FFT but just amp and this was just fine. Can you help me?
Hey, I think it is just a bug in the sound library. I used to get the same error message, but it didn't affect the code or sound in any way, though. However, I got rid of the error message by downloading the newest version of the p5js sound library. I'm not sure this is available on their website, but it is on GitHub. Hope that helps.
@@ColorfulCoding Hey do you maybe have a link to the version you used? because I tried that earlier but without success... I also get two warnings
"p5.sound.min.js:2 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page"
and
"DevTools failed to load SourceMap: Could not load content for 127.0.0.1:5500/libraries/p5.sound.min.js.map: HTTP error: status code 404,"
maybe this is whats causing the malfunction?
Hey Thanks, I got it to work!! still have the error though
Most browsers don't allow audio to start automatically, so you need to create a function that will start the audio - e.g. when you click on the canvas.
how to export to mp4
After pausing the song, I want to resume from the point it was paused at and not from the beginning. How to handle this ?
If you use "play" after you have used "pause", the song should resume from the point it was paused. If it doesn't, it might have something to do with the sound library. It might solve the problem, if you use the most recent sound library. I think there was a bug in one of the older versions. I don't think the most recent version is available on their webside, but you can get it on their GitHub page. Hope it helps :)
@@ColorfulCoding Thank you for quick response. Can I ask one more thing, it is not related to this actually ? I am using p5.js to display live input from microphone. Is there any way to freeze the display ?
You can use the noLoop() function to freeze the canvas. To resume you can call loop().
@@ColorfulCoding Thank you for your suggestion. It worked.
i want this music
12:40 Can someone explain to me why it is -width/2 and -height/2? Why isn't it 0? I tried and it didn't work.
The particles is created in the center of the canvas and the origin has previously been translated to the center instead of the top left corner. So (0, 0) is the center of the canvas. In order to check if a particle has hit the left edge, we need to check if its x position is smaller than -width/2. Hope that makes sense
@@ColorfulCoding Yes it does. Thank you😄
Do you teach? I would like to learn from you.
why you dont doing free site for that can you doing it we all need it too much pls
Hello. Great tutorial. Do you have any suggestions to modify this code to make it more alike to this one here? th-cam.com/video/luXtNn64rWY/w-d-xo.html
I don't think this one uses waveform and instead has different parts of the wave reacting to different elements such as the bass and the treble. Would love some suggestions.
I believe what is happening here is that the audio is separate into 4 parts, like using the Moises app. Then use this tutorial but instead of a mirror, you section this into 4 parts, all using a different instrument of the song like bass, drums, vocals and others.
Great content, but i think you should use your own voice or really human voice..