HomeОбразованиеRelated VideosMore From: The Coding Train

17.11: Sound Visualization: Frequency Analysis with FFT - p5.js Sound Tutorial

1537 ratings | 104824 views
In this "p5.js Sound Tutorial" video, I use the p5.FFT object to analyze the frequencies (spectrum array) of a sound file. I create a "graphic equalizer" like visualization. Support this channel on Patreon: https://patreon.com/codingtrain Send me your questions and coding challenges! Contact: https://twitter.com/shiffman p5.js sound library reference: https://p5js.org/reference/#/libraries/p5.sound p5.FFT object reference: https://p5js.org/reference/#/p5.FFT Kristian Pedersen's this.dot song: https://soundcloud.com/kristianpedersen/this-dot-feat-daniel-shiffman Source Code for the Video Lessons: https://github.com/CodingTrain/Rainbow-Code p5.js: https://p5js.org/ Processing: https://processing.org For More Sound in p5.js videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW Help us caption & translate this video! http://amara.org/v/YIOn/
Html code for embedding videos on your blog
Text Comments (132)
Joe Siu (10 days ago)
I use p5 because of you man I never would've found it if it wasn't for you
fakruddin p (27 days ago)
How to estimate Estimate the total amount of operations (Floating point operations) needed by the model to process a ten seconds audio
fakruddin p (27 days ago)
hi i need a help
BlackZero Rs (1 month ago)
How you able to start this on page load without event?
I have a question how can I make the static frequencies? I can't find anywhere. Please)))
Can we visuaize speech sounds in such a way that one would be able to tell which sound is played by just looking at the visualization? Do you think it's possible?
crein147 (4 months ago)
thank you for the videos, makes learning p5 on my own less hair ripping outy
onur çayan (5 months ago)
amk kabasakalı
Go Mo (5 months ago)
Bonus question: How to detect any browser sound or computer sound? Does it only work with loading files?
Go Mo (5 months ago)
I think I found something :) https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
Jean Jamil (6 months ago)
Hi how we can use fft with vb or other language to get a frequecies and plot it
MrBananaFarm (7 months ago)
I just can't get it to run like that. Where do I have to put the files to?
Bob Irving (7 months ago)
Do you do this anywhere with regular Processing?
MrBananaFarm (7 months ago)
Would it be possible to send the frequency data to an Arduino?
One standard idea is to filter your signal and verify how many times the analog input changes direction, like stops going higher and starts lowering and vice versa.
Oceaniawtf (8 months ago)
This is old af, but i still want to ask how the fft values are "dynamic". From signal theory i learned that you calculate fft for a certain window of time, returning fixed values that depends by the length of the window, the smoothness and so on. So what about this?
Halil Teker (8 months ago)
How can we utilize p5.js to determine the tone (at different octaves) that is playing from an instrument (e.g. piano)?
Beaver Joe (8 months ago)
Choose one good music is the key to follow the p5.sound.js tutorial. Mark this necessary tips please everybody.
Ankit Sharma (10 months ago)
windows media player did this before it was cool
Freudian Slit (10 months ago)
Is it possible, instead of drawing bars, that it plots a radial line graph to represent the frequencies? thank you!
The Coding Train (10 months ago)
For some hints see: https://www.youtube.com/watch?v=h_aTgOl9J5I
Eren (10 months ago)
I need a simple application that can tell me the frequency of the sound outside. The audio input will be my microphone. I want to make it my self and implement a formula or something that will calculate the speed of the soundsource. I need this because I am making my "Lecture" about DopplerEffect. I want to make an app that can calculta automatically the speed of the soundsource. Can you or somebody else help me with this? I watched lot of tutorials from you and they help me a lot, but what I want to achieve is not included in the tutorial. :) XD
Jhonatan López (11 months ago)
Hi, very nice job. I'm loking to use prossesing as a audio vizualizer taking my two main audio output signals (signal before my speakers) to vizualize it. Is it pposible with prossesing? I mean I would like to use an other application or software to perform music and I would love use prossesing as a visalizer. I've seen many people with this problem trought the web. Thx in advance.
The Coding Train (10 months ago)
Would you mind asking at https://discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
Ruffo (11 months ago)
what about mic input?
justins zavadskis (7 months ago)
Did you try doing that?
The Coding Train (11 months ago)
Try combining the code with this video https://youtu.be/q2IDNkUws-A
Fantastic! Love your channel so much!
Kalab (1 year ago)
I know this is an older video, and my comment might honestly have nothing to do with what's talked about in this video, but I've been trying to find information on something and I haven't been able to come across anything useful anywhere. I have chromesthesia (a form of synesthesia), so I interpret music as color. I'm also a musician, and until recently I thought that everyone saw/felt color when listening to music. Now that I know what I "have", I've started paying attention to it more, and I've thought it might be cool to try and visualize it for other people, and I think it would be really awesome to somehow even incorporate that visualizer into a live show scenario for my shows as a musician. I know visualizers exist, but what I'm thinking of would be different: each note from a guitar, for instance, would be represented by a light wave on a wall projection or on a screen. Depending on the note, the light wave-form would change "shape" and color. So for me, I could use this and actually reverse engineer it, in a sense, so that I'd be writing music with a light show in mind. I'd know that an A Minor chord is royal blue, and some notes from a G major chord are green, so I'd compose a song with that in mind to create certain shapes that flow into other shapes and colors that blend to form what I'M seeing when I play music. Anyway, sorry for the long explanation. Basically, I guess I want to know where I could start with all of this? Is there a program that already exists that I've just not been able to find? Am I going to have to learn code and create a program myself that does this? I know in general the program would need to be able to detect musical notes as frequencies, and then it would need to convert that into some sort of computer data that could be read by another program (the visualizer I'm assuming) that could convert that computer data into the color that I choose. Anybody's help would be greatly appreciated! If you're a coder, I'd even be willing to work WITH you to make this little idea of mine come to life on a small scale.
Kalab (10 months ago)
phenylalanine Nope, I haven't
phenylalanine (11 months ago)
Kalab Buzan I used to experience something similar, but only during the hypnagogic state (right when you’re falling asleep). I would see colored shapes that would correspond to the music. It doesn’t happen anymore, but I would like to create a program that does something similar. That’s one of the reasons I started to learn Processing. Have you seen Kaitlyn Hova’s videos?
Ambient Soda (1 year ago)
How would you access the sounds via the microphone?
ZeNos Beats (1 year ago)
i knew you will help me one day
Niklas Karlsson (1 year ago)
hi, can i measure STI in a recorded file? :-)
Can the oscilloscope be programmed?
Lu Reed (1 year ago)
oooooh yes pls combine the Perlin noise field with the fft !
Me 2016jack (1 year ago)
This is great , but how about the source audio node from live streaming audio ?
Dizotoff (1 year ago)
Is there any smart way to determine the bassline from the frequencies spectrum?
Pietro Lama (11 months ago)
it's really difficult, you have to filter all other frequencies and after use the dominant to have the pitch
Noobie747 (1 year ago)
I'm actually wondering where the other parts are
Noobie747 (1 year ago)
What is the green screen for? I asked this before as well but didn't receive a reply
Noobie747 (1 year ago)
Which language is this?
AHJ George (1 year ago)
Anhad Singha he's using p5js, which is a JavaScript version of the processing libraries originally written in Java
Noobie747 (1 year ago)
What is the importance of science and maths in Sound designing?
Mukul Barai (1 year ago)
Hi Daniel, do you rest you wrist on laptop while typing?
Andrzej Sokola (1 year ago)
Epic video <3 :D
Pixsa (1 year ago)
can we have that map() function in pure js?
Ben H (1 year ago)
Anyone know of a similar library in C or C++?
The Coding Train (1 year ago)
Check out openframeworks.
G G (1 year ago)
can you somehow use microphone instead of audio?
Dizotoff (1 year ago)
There is a working example on p5 project website!!
The Coding Train (1 year ago)
Yes, that works too in p5, check out the AudioIn object.
JoshuaH (1 year ago)
Here is my Version: http://joshuah.bplaced.net/Audio/ :D
Ben Gelber (1 year ago)
just a visitor and this wasn't what i was looking for, but damn you have a great presentation setup there with the greenscreen and whiteboard and everything i feel like i'm in a proper classroom
Michael Tuttle (1 year ago)
What a great series! Thank you so much. I have one question though: Did you ever end up making that video with many sound files and many buttons? I've been trying to figure it out and can't seem to figure it out.
Adam Korytowski (1 year ago)
hi, im java idiot, can I use this in causal JAVA project in IntelliJ?
Laura Scopazzo (1 year ago)
it would be great if you could make tutorials for Sound Visualization in Processing! I feel like it's so much more confusing in Java :(
Navjot Singh (9 months ago)
Laura Scopazzo Java isn't that bad! Compared to C/C++ thats as easy as it gets if you want to go more technical than JavaScript tbh
The Coding Train (1 year ago)
Please suggest here! https://github.com/CodingTrain/Rainbow-Topics/issues
realcygnus (1 year ago)
Cool ! It took me like months to program something similar to this(a 3D waterfall display version) on windows in like 1996. Just finding out what OS/SDK/Libs communicate with the sound card was like half the battle. I even used my own 3D maths at 1st but eventually used the 1st version of directX, which had its own learning curve. & if it wasn't for some genius's posting their quality FFT source, I would have been looking at a whole other project requiring a stack of books & even more weeks or months & to outstretch my abilities as well. Now you can get just about the same thing with only a few lines of simple code in any browser. that really is some nice progress imo ! (for the app/front-end developers anyway). I sure as hell wouldn't want to have to write these interpreters and/or be responsible for all of the sloppy(for lack of a better word) layers that makes all of this possible !
김화현 (1 year ago)
teacher, is there any way we can whoose to drill down and make a detailed measurement??
James Block (1 year ago)
I've noticed that the spectrum height seems to always be lower in the higher frequency ranges. I think it would be nice to kind of normalize the height a bit across the spectrum. Maybe by having a var that gets incremented by a certain value and added to the length of the line with each index of the spectrum array. I haven't tested this out yet, If anyone has a better idea of how to achieve this, I'd love to hear it. Also is there a way to access the RMS (Root Mean Square) values of the audio?
James Block rms I think should be equal to 2^(1/2)/2
kakarshi (1 year ago)
Source code?
Rob Potato (1 year ago)
In the video
LaZer Troll (1 year ago)
...this video annoys me...
MaximalGamingNL (1 year ago)
LaZer Troll this
Fazal Mehmood (1 year ago)
Why didn't you try that with a a microphone input instead of a song?
Afer Etis (1 year ago)
thank you very much!
franklin alonzo (1 year ago)
can you do that in Processing 3?
Pietro Lama (11 months ago)
yes you can! just use minim library
Alec Girman (1 year ago)
The sound library doesn't seem to work for me and appears to be very outdated :(
Mark Jay (1 year ago)
Track name?
DJ Amparo (1 year ago)
You should make a tutorial on wavesurfed sounds? Its a representation like the one of soundcloud. Should be very challanging
Shammus ur Rehman (1 year ago)
Good work sir.... which editor you are using i want to use this ?? Is any way we can remove the low amplitude frequencies using this library....I want to use it to remove background noises in audio ...
diego d_de_b (1 year ago)
Pretty sure the Frequencies are inverted. After the "this-dot" intro, when the kick starts, you see the Freqs on the right start moving -- should be on the left. Also, if I had to guess, the range is only going from ~2kHz to ~100Hz.. It would look way better if you invert the order of the array and also expand to a range to something like 20Hz to 20kHz. Great job though!
Martin Bijl-Schwab (1 year ago)
Challenge: https://www.youtube.com/watch?v=WvuyJ5F6AhI
Ra ji (1 year ago)
How to develop 3D FFT? Waterplot model
Mathieu Gouttenoire (1 year ago)
Is it possible to make this in processing istead of p5.js ?
zDanix (1 year ago)
Thank you!
Cristian Bernal (1 year ago)
It is possible to do this in Processing? If it is, it could be interesting to use this along with an Arduino and then connect it to some LEDs and make a VuMeter or a Frequency Analyzer.
The Coding Train (1 year ago)
Yes indeed, check out the Processing sound library! https://processing.org/reference/libraries/sound/
James Armstrong (1 year ago)
Take me to the frequency domain baby!
Heitor Giacomini (2 years ago)
how to use it with an youtube video?
Brancy10 (11 months ago)
Heitor Giacomini - Check our his other tutorials and you’ll be set in no time!
Mehmed Kurtic (2 years ago)
Hi everybody, someone know how can i save juste one section from a sound ? like the first 2 seconds from a sound of 2 minutes ? Thanks for your help!
Hentai404 (2 years ago)
I don't know if you saw my earlier pleas for an audio themed code challenge but thank you so much regardless!!
The Coding Train (2 years ago)
You're welcome!
Ceri Westcott (2 years ago)
although it's not too bad to convert the code, there's barely any processing sound tutorials out there. maybe you could investigate?
The Coding Train (2 years ago)
Good point.
Matthew Zvirbulis (2 years ago)
the ear is concerned with loudness when a signal has a larger average RMS value hence why smoothing is handy. Peak values or transients not so...
Lukrator (2 years ago)
you could take some fft numbers to animate 3d terrain, or fractal trees :D
Yann MASSARD (5 months ago)
yeah but what would be the depth dimension ?
Camille Feghali (1 year ago)
Thanks for the awesome vid, how would one go about animating said terrain//objects ?
The Coding Train (2 years ago)
Great idea!
Cany Bastien (2 years ago)
hi i don't know if it's stupid but is that the same code on processing ? thx
The Coding Train (2 years ago)
Yes take a look at the processing.sound library!
Luca (2 years ago)
hey dan, I don't quite understand how the map function works , can you explain it a bit plz
Luca (2 years ago)
Thanks alot mate
The Coding Train (2 years ago)
See: https://www.youtube.com/watch?v=nicMAoW6u1g
wakamoto1105 (2 years ago)
For the problem of having the lower frequencies too dominant and just complete silence for the upper frequencies; other than just limiting the frequency window, I've tried square-rooting all spectrum values and it seems to even out the amplitudes across frequencies better. I'm not sure if this is good practice, though, as it obviously gives a distorted representation of the amplitudes. Does anybody have a better solution?
Phoenix (4 months ago)
You want to visualize decibels but fft gives you amplitude. Decibel = 10 * log10(amplitude²). From my personal experience, i found out that fft gives you a maximum value of around 500, equivalent to around 27 decibels. To visualize it, i calculate the height of the rectangle (or whatever you want to visualize), which i'll call h, by doing h = map(decibel, 0, 27, 0, height-offset). Instead of 27 you can use a different value to scale up the visualization (i find 54 right). I give also an offset to keep some distance from top border. Hope it helps even if it's a late comment! :D
TheGBsXB (9 months ago)
What a nice discussion folks, thank you!
wakamoto1105 (2 years ago)
Gotcha! Thank you very much, this is very informative!
Craig McIlwrath (2 years ago)
+wakamoto1105 I believe that is how most visualizers I have seen work. I know the dubstepgutter and trapnation visualizers actually use about 0-250Hz for their frequency range. I'd expect there to be some variation between different visualizers.
wakamoto1105 (2 years ago)
hahaha, I actually agree that it doesn't look as interesting if you balance everything. However, if you plan to do a circular visualizer like he did at the end, it might make the disc look more evenly distributed. Thanks for the explanations, your explanation is clear and your logic is sound. My only confusion is is this the standard solution used by, say, media player developers; or do they all have their own ways of dealing with it?
SENIOR (2 years ago)
this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . this . goddamn...
Deepak Pun (11 months ago)
this dot this dot this dot not that dot not that dot this dot this dot this dot not that dot not that dot this dot this dot this dot not that dot not that dot
SENIOR (2 years ago)
loving it
realcygnus (2 years ago)
priceless! ........its crazy how long something like this could take in the old days
Hackerpro13 (2 years ago)
How does one turn the volume up and down?
KD Chen (2 years ago)
Pretty much brainwashed by "this-dot" song for the next half of the video.
The Coding Train (2 years ago)
+KD Chen haha
ip jonathan daniel (2 years ago)
Hi, I am following your steps to create a player for my website. But my website failed to load the mp3 file. I performed loadSound in the preload function and the website just stopped at the "Loading" page and nothing happened. I tried different mp3 files and changing the accessing right with chmod but still nothing happened. T_T help me
Jarmahent (2 years ago)
You should make a program where it takes in a picture and spits out circles or squares based on the pixels of the image
Flaflo (2 years ago)
Please shave your beard :'D
João Vitor dos Santos (2 years ago)
don't listen to this human, never shave your beard
Akshat giri (2 years ago)
Question - I was trying to make a beep - yes, beep detection program..which detects the number of beeps in the sound. I got it to log the values of the spectrum when there was a beep, but i am still not sure how i can count the beeps. It logs multiple arrays each time their is beep. Any idea on how i could do that? Atleast point me towards the right direction. Thanks.
A M (2 years ago)
I'm not entirely sure what you're trying to do, but I think PeakDetect will be useful: https://p5js.org/reference/#/p5.PeakDetect
Josef Kuchař (2 years ago)
Omg, you can combine your blobby coding challenge with this
The Coding Train (2 years ago)
+Pepa489 good idea!
Caleb Gorman (2 years ago)
Love the tutorials. (It's pronounced Four-ee-ay) :) Keep up the good work!
Nigel the Meech (2 years ago)
I've been watching your videos for a while now and love your content more than any other programming educator I know of. I'd like to see a series where you help us understand all the facets of web development. Not necessarily going into expert level depth but giving us an idea about what its all about; which pieces of software are used and why, how do databases work, etc.
w1lt (2 years ago)
as always, i always forget the thisdot :-(
Asa Taylor (2 years ago)
Your vector field visualization made me learn how to do lots of lines in one drawCall: beginShape(LINES); then put both the start and end point in your for loop.
Durgesh Singh (2 years ago)
Awesome video tutorial Daniel, That is something what I was looking since my college.Please keep sharing interesting stuff with us always. Thank you so much !!
king felix (2 years ago)
I'm fake here. agree?
Shuhao Shang (2 years ago)
Wow, really helps for understanding p5.FFT Yeah, the frequency spectrum and time domain sounds like hocus-pocus to me before.
The Coding Train (2 years ago)
Yeah, thank you!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.