Code an Audio Visualizer in p5js (from scratch) | Coding Project #17

Просмотров 49 тыс.

% 1 366

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:
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9QxlBl8G_m0.html
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 👇

Опубликовано:

28 фев 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 99

@abdurrahmanalsayed149 3 месяца назад

Your video might just save my college midterm and I am forever grateful to you for this.

@erickgarcia1616 3 месяца назад

uol ??? I am in the same struggle myself bro hahaha I will add this to my midterm.

@abdurrahmanalsayed149 3 месяца назад

@@erickgarcia1616 yea UoL, I did that, I'm only missing one of the Coursera extensions and the report

@ConfusedNDazed 3 года назад

The best tutorial so far, please keep producing them 👍

@mixtapeverse1184 9 месяцев назад

Thank you for this awesome video! How did you capture/export the visualizer and turn it into a video?

@joan.ps1 5 месяцев назад

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

@richardjamesbunker 3 года назад

This is so good! Very inspiring and so happy I learned javascript!

@mixtapeverse1184 10 месяцев назад

That was awesome and works great! Definitely checking your patreon. Thank you!

@fabiomicalizzi6052 23 дня назад

Your waveform is beautifully smoother than mine. I'm using the web editor ad mp3 file. Any suggestions? Thank you so much for your dedication!

@umeshrajbanshi 8 месяцев назад

The awesome tutorial i have found❤❤

@67Keldar Год назад

Mind Blown.... 😮❤‼

@juanjoherreragimenez3988 8 месяцев назад

Fantastic video tutorial, you help me so more for a job thanks you very much

@alebychac Год назад

This is amazing. I'm so happy to find this video👍

@yibin-t1m 2 дня назад

Hello，I want to fully implement most of the functions from Python's turtle module using p5.js, including showing the drawing trace. Now there’s a problem: after defining the turtle class, if I execute multiple predefined turtle methods in the draw() function, for example, executing turtle.forward(100) twice in the draw() function, they will be executed simultaneously. How can I make them execute in sequence, one after the other, so that it achieves the same effect as drawing with Python's turtle library?

@deckermv7530 2 года назад

You're mad talented. Just subbed

@KevinYu900 4 месяца назад

I followed your tutorial and came last in the class.

@yvonnewu7668 2 года назад

This is awesome!! your explanation is very clear! thanks!

@shrippie-4214 2 года назад

So why does my page just say loading.. forever?

@turboblitz4587 2 года назад

This looks amazing! Will try it out with some adjustements :) Thanks for the video

@sunlight8127 3 года назад

Been looking for these things, you saved me a lot of time :), to put my things in better way.

@TrDer-bm3yk 2 месяца назад

good on you brother

@gunjandhanuka9140 2 года назад

Great tutorial!

@911Kano 3 года назад

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.

@yodering Год назад

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?

@ColorfulCoding Год назад

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?

@Chizuko_TuT 4 месяца назад

@@ColorfulCoding i have the same problem, but everything is just like in the video. when i delete the 'function preload() {...' my black canvas is back but with it the whole canvas is gone and there is a message in the top left corner, saying that it is 'loading...' (forever)

@u2bMusicBeauty 3 года назад

Wow 👏😮, I like it, so far so good, it's really fun.+👍

@ColorfulCoding 3 года назад

Thank you very much!

@alehtsiusiankou7636 3 года назад

a have a problem, The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

@ColorfulCoding 3 года назад

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

@henryschneiderproductions4061 3 года назад

very good explanation for what I needed thx a lot 😁

@dear_dada 2 года назад

hi can i know why my particles just kept generating even the song was played

@RemRDS 2 года назад

What's a substitute for the class function? I get a parsing error: keyword 'class' is reserved

@filipsozolins347 2 года назад

where did you get this music?

@andrewperkinson8941 2 года назад

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

@andrewperkinson8941 2 года назад

Solved It!

@sgtrat5772 Год назад

@@andrewperkinson8941 how

@StevesMakerspace 3 года назад

Very helpful. Thank you!

@taihatranduc8613 2 года назад

very good video. thank you

@techmasterxd4739 3 года назад

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

@Baeyk Год назад

bro, how you record the screen? Please help me! I want recorde my arts to share

@MOHAMMEDIREX16 2 года назад

Thank you very much 😉

@brunoavelar4003 2 года назад

Could this be done with p5.audioIn() and graph the audio from the users microphone in real time?

@ColorfulCoding 2 года назад

Definitely! I think thecodingtrain has made a video doing that

@brunoavelar4003 2 года назад

@@ColorfulCoding What a fast reply! Thanks a lot.

@henrickzhang5868 Год назад

what is this song, please share a link with me, Thanks

@flaviomarcelo9044 3 года назад

Thank you so much, you are amazing.

@IC-ec7hw 6 месяцев назад

Is this doable in Flutter?

@christiancampos86 Год назад

Hi man! thanks for this video, how can i find you on patreon

@redeye-s0ul949 2 года назад

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)

@lanenaamorcita Год назад

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.

@thinhnguyenhuy9119 2 месяца назад

you're awesome :D

@rikdehoop9612 3 года назад

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?

@ColorfulCoding 3 года назад

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.

@rikdehoop9612 3 года назад

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

@rikdehoop9612 3 года назад

Hey Thanks, I got it to work!! still have the error though

@ColorfulCoding 3 года назад

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.

@tomiwaadesanya7346 Год назад

Is it possible to achieve this same thing using python?

@cormacang567 2 года назад

Hi, my circle is not meeting at the bottom, there is space in between for some reason, can you please address this ?

@victoriagrace2139 Год назад

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 !

@vikramenu Год назад

hi, Can we get the same effect with the mic stream audio data using P5.js?

@ColorfulCoding Год назад

Yes, you can create a audio stream from the mic like this: p5js.org/examples/sound-frequency-spectrum.html

@Weeniehutnurse 2 года назад

i'm getting the error cannot access Particle before initialization

@SuilujChannel 3 года назад

Great video! One question: why does the flickering of particles stop if you loop backwards?

@SuilujChannel 2 года назад

@@bysho thanks for your detailed answer:)

@mlvmakesart21 2 года назад

is it possible for us to load 2 songs simultaneously and give them different waves to see them reacting differently?

@SculptShape3D 8 месяцев назад

what word to search in petreon

@adityasinha3851 3 года назад

After pausing the song, I want to resume from the point it was paused at and not from the beginning. How to handle this ?

@ColorfulCoding 3 года назад

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 :)

@adityasinha3851 3 года назад

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

@ColorfulCoding 3 года назад

You can use the noLoop() function to freeze the canvas. To resume you can call loop().

@adityasinha3851 3 года назад

@@ColorfulCoding Thank you for your suggestion. It worked.

@klemlloydmwenya2224 2 года назад

How can this be archived in React.js?

@rickierick7532 2 года назад

May I ask which editor you use to write your p5.js code?

@ColorfulCoding 2 года назад

I use Visual Studio Code :)

@dianab536 3 года назад

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

@dianab536 3 года назад

i figured out the problem my this.vel was suppose to be p5.Vector.random2D().mult(0).

@leonmatryovsk5637 3 года назад

AWESOME

@AMITGUPTA-nx1dn 3 года назад

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

@RishiSingh-sc2sr 3 года назад

It can be used in reactjs, go for it.

@Merthalophor 3 года назад

probably difficult, consider using an

@bananahit Год назад

how to export to mp4

@mohankrishna3560 2 года назад

thanks man

@Sophia-kf6tm 2 года назад

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.

@ColorfulCoding 2 года назад

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

@Sophia-kf6tm 2 года назад

@@ColorfulCoding Yes it does. Thank you😄

@SumanMondal-cb8yl 3 года назад

How do I make the spikes sharper? Anyways a brilliant tutorial ❤️. Keep it up

@ColorfulCoding 3 года назад

You could decrease the number of points in the waveform. That would add some more space between each point and make the spikes sharper :)

@timetraining6496 Год назад

Do you teach? I would like to learn from you.

@ezequielignaciosalgueiro7285 3 года назад

what software are you using??

@ColorfulCoding 3 года назад

It is just code. But I'm working in Visual Studio Code if that is what you mean :)

@ezequielignaciosalgueiro7285 3 года назад

Thanks, i use Eclipse, but i have visual studio too ☺️

@bypro8511 3 года назад

why you dont doing free site for that can you doing it we all need it too much pls

@lunaeclipse5768 2 года назад

this is LIT

@swiftsausages 2 года назад

Hello. Great tutorial. Do you have any suggestions to modify this code to make it more alike to this one here? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-luXtNn64rWY.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.

@arter9370 2 года назад

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.