Hi Nick, thank you for your kind words, I try to make each video a bit different, there is a lot to cover in front end web dev, always something new to learn
Hi Phoenix, that's a brilliant combination of skills, you can make a music track with a hand made custom visualiser and make something that fits the theme of the song well
@@Frankslaboratory You are my main teacher for everything coding and I must thank you lots for that, keep up the amazing work and I will continue to spread the word about your awesome channel :D
Yes! Another Frank tut! Hey Frank, hope you're doing well. I finally have my work-provided computer (a Mac) so I've been playing around with the particles and animations. It's so much better than my other PC. I look forward to following through this video and learning more about the webAudio API. Thanks again for all your vids and great content!
Awesome. I was so happy when I got my first work macbook. And then immediately disappointed when I found out that most games don't work on Macs ahaha. Maybe it was for the better and made me spend more time with JavaScript. Glad to hear your new coding career is moving fast in the right direction 👏
Your way of explaining is really good! Concise but precise, in a easy to follow speed. You provide necessary information where needed, but only when needed. Also you clearly have a red line and a script which elemininates all the live coding slowdowns which occur in realtime tutorials. This is very well done!
Just discovered this channel. These are great small projects. I wish you had a series or a big project for canvas because frankly there are very few out there
I will say what we in the comments already know: You're the man, Frank. Your vids are a good Saturday Morning with Coffee routine! Excited to check this one out tomorrow.
Hi J, thank you, very kind to say that. Coffee and coding is the best combination, I always get my best ideas after a strong shot of large cappuccino :D
@@JM-de2ghAhahaha, I actually thought you were in Japan. You have great comedic timing :D Nice choice of colours btw, the visualiser goes really well with the background, congratulations on completing the project. Looks like both your back end and front end skills are getting better and better. Thanks for sharing and making me laugh :D
Hahaha i come from Radu's video and i said to him about the modules and now i see you said it, great to hear this, best way to get all together is with modules, you can setup easily a python http server.
I need to start using modules, but I guess I will have to explain setting up a local server in every video since I want beginners to be able to follow. Also my channel is JavaScript only so I need to find the best and simple way to do that within my niche
Need to make this for a feature I'm developing, clueless to say the last. Followed along and now I can create the equalizer. But I also need to make a expanding rounded Mic button react to volume change, was thinking of using CSS and scaling a absolutely positioned circle behind the original one depending on volume and then just fading it out using @keyframes. Do you have a better suggestion maybe? Would be much appreciated. P.S. Your teaching style is absolutely magnificent.
this is 0 to sampleRate / 2 frequency range can you make a video how to adjust frequency range for example i need 10 bars in ( 0 to 250 ) hz range like this
Thanks for this amazing tutorial! Would you be able to change the audio source from Microphone to CaptureSystemAudio so you can have your computer audio output become the input for the visualizer?
I do love easy javascript 🙋 It's been a while since I pop up here , hope , teach Franks is healthy and cool as usual , I have been learning parallax effect to implement it in my webpage design . A recent event , hit me btw , like school are giving way too complex coding stuff to children to do as soon as they teach them about loop , it's weird 🤔
Hi Tarun, yea it's been a while since we spoke, good to see you around again. Parallax makes websites look so good, I want to make some videos on that topic. I don't really know what level of coding they teach in schools these days. I hope they make it fun with some interesting projects as well
@@Frankslaboratory i was looking at a friend's homework and it`s a little complex for students new to coding , i'll love to implement this audio trick in my projects , it'll be super fun ...... even if i mess up , it'll be fun
@@tarun7617 I had a lot of fun making visualisers for this course. Give it a try if you want. I need to ask someone to show me what kind of projects people learn in school these days :D
Hello Mate ! i am thinking of making something like audio visualizer in various forms and also video visualizer but in the form of pixel or mosaic type , i haven't started but i am really excited to start it from scratch , i do have more functionalities and features to be discussed on , can we connect if u might help
Assuming it was the RUclips algorithm whom deleted my comment from days ago and not Frank (since it contained a jsfiddle link): you can achieve the "drawing" effect in the begging by using a combination of stroke-dashoffset, and stroke-dasharray to a number that makes the SVG invisible (e.g.: 2000/2000, depends on the image), then animate the stroke-dashoffset to 0, using CSS3.
Hi Januario, it was RUclips, they have agressive spam filter, I can't do anything to restore auto deleted comments. Thank you for sharing, yes the drawing effect is achieved using combination of stroke-dashoffset and stroke-dasharray. I'm releasing a video this week where I build one of the special visualisers from start to finish
Hello Frank, I'll start with a question: how can I export the visualizer + audio to a video (for example mp4)? This has been another awesome tutorial going into great depth and detail! Thank you so much!
I would recommend a screen recorder its quick and easy. Browsers are good at exporting gifs but export to a mp4 format is complicated. I would have to research how I dont even know.
@@Frankslaboratory Wow I didn't expect an answer that fast, thank you! If I may ask, how do you do it? Can't the 'rendering' happen in the background? I'm trying to use your method to make music videos with visualizer, so preserving the quality is crucial. Thank you again!
@mixtapeverse1184 video encoding is a complicated topic that I'm not an expert in. I dont think JavaScript is the best tool for that, but it might be possible. Maybe there is a library to make it easy. I would have to research it. Personally I would just play it on a big screen and record it in high resolution. Screen recorders have settings where you don't lose any quality. This goes beyond my expertise. Let me know if you come up with a solution
@@Frankslaboratory Thank you so much for your answer Frank. I'll give this a try and if i come to another solution i'll share it here with the community. Please keep up the great work, soon i'm planning to enroll in one of your Udemy lessons! Cheers from Greece!
Hi Frank. Love your tutorials so much. Is there a trick I'm missing on playing sound effects in my games. They always work just find on my PC, but NEVER on my ipad or iphone. Do you have a video that address this?
Hi. Mobile audio has many limitations. For example it won't play until there is a user event so you have to have a button to start the game or something and user clicking on that button with allow the audio to play. I will make more detailed video on this topic eventually. There are also probably articles about this in MDN game development pages
whenever i try and run this code it tells me that "analyser is not defined" when i open the browser, and the console has no array updates. any ideas what could be the problem?
Hi Frank, I received an error "Uncaught TypeError: Cannot read properties of undefined (reading 'getByteTimeDomainData')". I suspect it is because the const samples = microphone.getSamples() was called before the new Microphone() had finished initialising. Would you be able to advise how to resolve this?
You need to make sure you call getByteTimeDomainData after analyser node was successfully created. I show how to resolve it in this video, if it happened to you at the same point. If you want full source code you can message me on Twitter
@@Frankslaboratory Same problem, tried the same fix as you. It throws the error when I click "allow" for my microphone to be used. Could this be any error from my microphone?
I could be wrong, but you say "unasigned" a few times. Do you mean to say "unsigned" instead? I've just never heard of "unasigned" for this type of number, but "unsigned" (ie, positive values 0 - 255) makes more sense to me.
Hi Parker, you are right, it's unsigned, I will focus on my pronunciation next time and make sure I use the right word. Thank you for pointing that out
Hi, thanks for the tutorial. How to calculate the number of seconds (or say milliseconds) for which volume function calculated the average volume? I understand it depends on the the value of fft size, but difficult to figure out the span of time.. thanks!
Hi. Since we are calculating volume value every animation frame all we need is delta time value to see how many milliseconds each frame lasts. If your app refreshes 60 times per second volume is calculated every 16.6 milliseconds. Maybe I misunderstood your question. If so let me know :)
I think volume is calculated for that particular moment. There is no time span. Now we are going a bit too deep under the hood. I dont know complete ins and outs of fft algorithm. I will research it better for the next video
Hello, just to try the catch I clicked refuse to the microphone permission, now I just get "NotAllowedError: Permission denied" over and over even if I refresh the page and cancel chrome history and cookies, how to make the page ask the permission again?
Hi Riccardo. This has never happened to me. Maybe you Will have to reset browser permissions manually or something. Try to run it in Firefox just to test it
Hi Frank, I'm new to Java and I thought following along would be great way to start to learn. However, I seem to have gotten stuck! I've gotten to the point to where you're we've bar1 to the animate function, but for some reason the bar isn't showing up (9:15). I've watched and rewatched your instructions, but I can't seem to find my mistake. Any advice would be supper helpful!
Interestingly enough I was tinkering with the color call outs and managed to find that for some reason my bar is not turning blue--it's remaining the default black. Any ideas as to why that might be?
Hi, if it's remaining black there is a problem with your fillStyle call, either wrong syntax on that line or you are calling it from a different place than I did. fillStyle is a single property on canvas object that gets overwritter easily. Hard to help you on here, if you can't sort it out message me on Twitter and I can send you final code from this episode
Would there be anyway to take that (fftsize/2) in the for loop in the createBars function and set it to a range input so you could update the number of bars live? I've gotten it to work but I have to refresh the page each time for it to go through createBars() and animate() to update the number of bars. Thanks.
There are many ways to do that. I would probably do public setter method on microphone class that takes values from a drop down since fftSize needs to be a set of very specific values. Then I would attach it to an event that empties bars array and calls createBars again to replenish it with new set of audio bars
Now for my daily dose of computer magic :D
Shazam!! 😄😆😆
Welcome back! I always await your videos with bated breath. I love the originality of your chosen subjects.
Hi Nick, thank you for your kind words, I try to make each video a bit different, there is a lot to cover in front end web dev, always something new to learn
As a musician and a beginner coder, this is perfect for me - thank you so much for your awesome tutorials! (:
Hi Phoenix, that's a brilliant combination of skills, you can make a music track with a hand made custom visualiser and make something that fits the theme of the song well
@@Frankslaboratory You are my main teacher for everything coding and I must thank you lots for that, keep up the amazing work and I will continue to spread the word about your awesome channel :D
@@phoenixxofficial Thank you Phoenixx, I'm glad to hear you feel inspired, good luck with your coding studies! :)
Yes! Another Frank tut!
Hey Frank, hope you're doing well. I finally have my work-provided computer (a Mac) so I've been playing around with the particles and animations. It's so much better than my other PC.
I look forward to following through this video and learning more about the webAudio API.
Thanks again for all your vids and great content!
Awesome. I was so happy when I got my first work macbook. And then immediately disappointed when I found out that most games don't work on Macs ahaha. Maybe it was for the better and made me spend more time with JavaScript. Glad to hear your new coding career is moving fast in the right direction 👏
Your way of explaining is really good! Concise but precise, in a easy to follow speed. You provide necessary information where needed, but only when needed. Also you clearly have a red line and a script which elemininates all the live coding slowdowns which occur in realtime tutorials. This is very well done!
Great work as always, following you and Radu, learning a lot with you! thank you so much guys!
Hi Eternam, thank you, glad you find some value, Radu has a lot of original content on his channel, especially in his long form courses.
!!! Just found you and all this insanity sir. I'm going to get proper lost in all this. Thank you for your passionate exploration and explanation.
so so so good. I LOVE this channel, man!
Hi Chris, thank you, good to have you here ❤
hands down the best tutorials on youtube, advanced but easy to follow through, Thank you!
Glad you think so. I'm still learning how to make the classes easier to follow.
i was waiting for your video 🔥
Thanks for waiting Soussou, I was very busy with life but back to creative coding now :D
Just discovered this channel. These are great small projects. I wish you had a series or a big project for canvas because frankly there are very few out there
Nice tutorial for beginners.
Thank you Adem, I made sure it's easy to follow and even beginners can build a nice visualiser by the end of the video
Thanks, with this help i will at least finish my project on codepen, a simple vtuber on javascript, many thanks!
Dude this is epic. 💯% generative art. It's completely data driven.
Hi, thank you for your feedback, appreciated
Awesome video like always keep going !
Waiting for the next one
Thanks Samourai, I appreciate your support!
Awesome as always. This was a far more entertaining way of learning about working with the microphone than reading some API documentation.
Thanks Viktor, yea I think it's better to learn with something visual, at least for me, it's easier to remember
I will say what we in the comments already know: You're the man, Frank. Your vids are a good Saturday Morning with Coffee routine! Excited to check this one out tomorrow.
Hi J, thank you, very kind to say that. Coffee and coding is the best combination, I always get my best ideas after a strong shot of large cappuccino :D
@@Frankslaboratory Alright Frank, the coffee has been drank and the video watched. Behold! A tribute: ruclips.net/video/pYuSrHGY0bA/видео.html
@@JM-de2ghAhahaha, I actually thought you were in Japan. You have great comedic timing :D Nice choice of colours btw, the visualiser goes really well with the background, congratulations on completing the project. Looks like both your back end and front end skills are getting better and better. Thanks for sharing and making me laugh :D
Frank this is awesome. Gonna try this sometime if I have time :D
Hi CS, thank you, glad you like it, thanks for letting me know!
Hahaha i come from Radu's video and i said to him about the modules and now i see you said it, great to hear this, best way to get all together is with modules, you can setup easily a python http server.
I need to start using modules, but I guess I will have to explain setting up a local server in every video since I want beginners to be able to follow. Also my channel is JavaScript only so I need to find the best and simple way to do that within my niche
Very good as always Frank, congratulations and thank you for sharing!
Danilo! Thank you for giving me your feedback, I appreciate it
I was waiting for your video from a month
Hi, thank you for waiting, I was very busy but I'm back now :D
this is super cool
Thank you, I need to make a follow up to this with some new things soon
Like before watching 👍
Thank you Ali
Need to make this for a feature I'm developing, clueless to say the last. Followed along and now I can create the equalizer.
But I also need to make a expanding rounded Mic button react to volume change, was thinking of using CSS and scaling a absolutely positioned circle behind the original one depending on volume and then just fading it out using @keyframes.
Do you have a better suggestion maybe?
Would be much appreciated.
P.S. Your teaching style is absolutely magnificent.
Frank! Great as usually!!!
Hi Andrew, thank you!!
This is cool!!!
Thanks Lakshman
who unliked this???? Awesome content Frank. Thank you
Hi Odyek, thank you !! :)
Good work ❤
I'm here to help ❤
Que buen contenido tiene este canal!! Éxitos muy buen tutorial 👌!!
Hi Sebastian, thank you ❤
Great tut, u are amazing in teaching!
really? Thank you, very kind to say that
New vid, nice!
Thank you mr Robot
It is very supper cool tutorial
Glad you found some value
this is 0 to sampleRate / 2 frequency range
can you make a video how to adjust frequency range for example i need 10 bars in ( 0 to 250 ) hz range like this
you guys are really really amazing really my jaw dropped
Really? Thank you. We can do much more if people like it. Maybe soon :)
may be that soon come early
very useful thank you
I'm here to help :D
Nice now I am ready to make a dj ,lol
Yes, there are many really cool visualisations that can be done with this technique, I will make more if people like audio tutorials
How can i add radio url?
Thanks for this amazing tutorial! Would you be able to change the audio source from Microphone to CaptureSystemAudio so you can have your computer audio output become the input for the visualizer?
I do love easy javascript 🙋
It's been a while since I pop up here , hope , teach Franks is healthy and cool as usual , I have been learning parallax effect to implement it in my webpage design . A recent event , hit me btw , like school are giving way too complex coding stuff to children to do as soon as they teach them about loop , it's weird 🤔
Hi Tarun, yea it's been a while since we spoke, good to see you around again. Parallax makes websites look so good, I want to make some videos on that topic. I don't really know what level of coding they teach in schools these days. I hope they make it fun with some interesting projects as well
@@Frankslaboratory i was looking at a friend's homework and it`s a little complex for students new to coding , i'll love to implement this audio trick in my projects , it'll be super fun ...... even if i mess up , it'll be fun
@@tarun7617 I had a lot of fun making visualisers for this course. Give it a try if you want. I need to ask someone to show me what kind of projects people learn in school these days :D
@@Frankslaboratory I'll love to try all new stuff teacher Franks can provide :)
Hello Mate ! i am thinking of making something like audio visualizer in various forms and also video visualizer but in the form of pixel or mosaic type , i haven't started but i am really excited to start it from scratch , i do have more functionalities and features to be discussed on , can we connect if u might help
he's back 🤑
I am back indeed, hi :D
Assuming it was the RUclips algorithm whom deleted my comment from days ago and not Frank (since it contained a jsfiddle link): you can achieve the "drawing" effect in the begging by using a combination of stroke-dashoffset, and stroke-dasharray to a number that makes the SVG invisible (e.g.: 2000/2000, depends on the image), then animate the stroke-dashoffset to 0, using CSS3.
Hi Januario, it was RUclips, they have agressive spam filter, I can't do anything to restore auto deleted comments. Thank you for sharing, yes the drawing effect is achieved using combination of stroke-dashoffset and stroke-dasharray. I'm releasing a video this week where I build one of the special visualisers from start to finish
Whenever I get to adding the .getVolume method at 46:20 it makes the entire visualizer disappear any ideas on where I went wrong?
Helpfull video! Btw small youtuber here!
Hi, thank you, good luck with your channel, it takes a while to get some momentum so keep going :D
@@Frankslaboratory thank you !
Hello Frank, I'll start with a question: how can I export the visualizer + audio to a video (for example mp4)? This has been another awesome tutorial going into great depth and detail! Thank you so much!
I would recommend a screen recorder its quick and easy. Browsers are good at exporting gifs but export to a mp4 format is complicated. I would have to research how I dont even know.
@@Frankslaboratory Wow I didn't expect an answer that fast, thank you! If I may ask, how do you do it? Can't the 'rendering' happen in the background? I'm trying to use your method to make music videos with visualizer, so preserving the quality is crucial. Thank you again!
@mixtapeverse1184 video encoding is a complicated topic that I'm not an expert in. I dont think JavaScript is the best tool for that, but it might be possible. Maybe there is a library to make it easy. I would have to research it. Personally I would just play it on a big screen and record it in high resolution. Screen recorders have settings where you don't lose any quality. This goes beyond my expertise. Let me know if you come up with a solution
@@Frankslaboratory Thank you so much for your answer Frank. I'll give this a try and if i come to another solution i'll share it here with the community. Please keep up the great work, soon i'm planning to enroll in one of your Udemy lessons! Cheers from Greece!
Hi Frank. Love your tutorials so much. Is there a trick I'm missing on playing sound effects in my games. They always work just find on my PC, but NEVER on my ipad or iphone. Do you have a video that address this?
Hi. Mobile audio has many limitations. For example it won't play until there is a user event so you have to have a button to start the game or something and user clicking on that button with allow the audio to play. I will make more detailed video on this topic eventually. There are also probably articles about this in MDN game development pages
whenever i try and run this code it tells me that "analyser is not defined" when i open the browser, and the console has no array updates. any ideas what could be the problem?
It means analyzer is not defined.
Hi Frank, I received an error "Uncaught TypeError: Cannot read properties of undefined (reading 'getByteTimeDomainData')". I suspect it is because the const samples = microphone.getSamples() was called before the new Microphone() had finished initialising. Would you be able to advise how to resolve this?
Hi, yes, that's exactly what happened. Same thing happened to me in the video, who don't you follow my code to resolve it?
You need to make sure you call getByteTimeDomainData after analyser node was successfully created. I show how to resolve it in this video, if it happened to you at the same point. If you want full source code you can message me on Twitter
@@Frankslaboratory Same problem, tried the same fix as you. It throws the error when I click "allow" for my microphone to be used. Could this be any error from my microphone?
I could be wrong, but you say "unasigned" a few times. Do you mean to say "unsigned" instead? I've just never heard of "unasigned" for this type of number, but "unsigned" (ie, positive values 0 - 255) makes more sense to me.
Hi Parker, you are right, it's unsigned, I will focus on my pronunciation next time and make sure I use the right word. Thank you for pointing that out
Hi, thanks for the tutorial. How to calculate the number of seconds (or say milliseconds) for which volume function calculated the average volume? I understand it depends on the the value of fft size, but difficult to figure out the span of time.. thanks!
Hi. Since we are calculating volume value every animation frame all we need is delta time value to see how many milliseconds each frame lasts. If your app refreshes 60 times per second volume is calculated every 16.6 milliseconds. Maybe I misunderstood your question. If so let me know :)
I think volume is calculated for that particular moment. There is no time span. Now we are going a bit too deep under the hood. I dont know complete ins and outs of fft algorithm. I will research it better for the next video
Hello, just to try the catch I clicked refuse to the microphone permission, now I just get "NotAllowedError: Permission denied" over and over even if I refresh the page and cancel chrome history and cookies, how to make the page ask the permission again?
Hi Riccardo. This has never happened to me. Maybe you Will have to reset browser permissions manually or something. Try to run it in Firefox just to test it
@@Frankslaboratory thank you for the super clear and fun tutorial! looking forward to learn many cool things, thank you! :)
Hi Frank, I'm new to Java and I thought following along would be great way to start to learn. However, I seem to have gotten stuck! I've gotten to the point to where you're we've bar1 to the animate function, but for some reason the bar isn't showing up (9:15). I've watched and rewatched your instructions, but I can't seem to find my mistake. Any advice would be supper helpful!
Interestingly enough I was tinkering with the color call outs and managed to find that for some reason my bar is not turning blue--it's remaining the default black. Any ideas as to why that might be?
Hi, if it's remaining black there is a problem with your fillStyle call, either wrong syntax on that line or you are calling it from a different place than I did. fillStyle is a single property on canvas object that gets overwritter easily. Hard to help you on here, if you can't sort it out message me on Twitter and I can send you final code from this episode
Would there be anyway to take that (fftsize/2) in the for loop in the createBars function and set it to a range input so you could update the number of bars live? I've gotten it to work but I have to refresh the page each time for it to go through createBars() and animate() to update the number of bars. Thanks.
There are many ways to do that. I would probably do public setter method on microphone class that takes values from a drop down since fftSize needs to be a set of very specific values. Then I would attach it to an event that empties bars array and calls createBars again to replenish it with new set of audio bars
@@Frankslaboratory Thanks, I got it!
Hi how are you bro I am thinking you are Topper in js with canvas
Thank you Noorulhuda. Very kind
It didn't work on iOS. Has anyone had this problem?
With programming it's better to be a little bit more specific. It's hard to follow up when you just say it didn't work :)
I am struggling to understand am still new to javascript.
Hi, it takes a while to learn the basics, keep going, I always recommend doing a complete beginner JS tutorial before starting projects
RUclips #RETURNDISLIKE
Haha, there is always someone who doesn't like my projects. It's alright :D
@@Frankslaboratory No man, you have cool content. I wrote this comment to express my dissatisfaction with the removed dislikes on RUclips.
I can still see dislikes. Didnt know about this update