As a musician and a beginner coder, this is perfect for me - thank you so much for your awesome tutorials! (:
@Frankslaboratory2 жыл бұрын
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
@phoenixxofficial2 жыл бұрын
@@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
@Frankslaboratory2 жыл бұрын
@@phoenixxofficial Thank you Phoenixx, I'm glad to hear you feel inspired, good luck with your coding studies! :)
@coltonaallen2 жыл бұрын
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!
@Frankslaboratory2 жыл бұрын
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 👏
@paulmaguire8726 ай бұрын
!!! 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.
@nicklansbury31662 жыл бұрын
Welcome back! I always await your videos with bated breath. I love the originality of your chosen subjects.
@Frankslaboratory2 жыл бұрын
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
@adempaul89512 жыл бұрын
Nice tutorial for beginners.
@Frankslaboratory2 жыл бұрын
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
@me-me8ge2 жыл бұрын
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!
@surfspectives6750 Жыл бұрын
Dude this is epic. 💯% generative art. It's completely data driven.
@Frankslaboratory Жыл бұрын
Hi, thank you for your feedback, appreciated
@ashiinsane902 жыл бұрын
hands down the best tutorials on youtube, advanced but easy to follow through, Thank you!
@Frankslaboratory2 жыл бұрын
Glad you think so. I'm still learning how to make the classes easier to follow.
@soussousalahiddine59332 жыл бұрын
i was waiting for your video 🔥
@Frankslaboratory2 жыл бұрын
Thanks for waiting Soussou, I was very busy with life but back to creative coding now :D
@Eternam2 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
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
@ChristopherCricketWallace2 жыл бұрын
so so so good. I LOVE this channel, man!
@Frankslaboratory2 жыл бұрын
Hi Chris, thank you, good to have you here ❤
@JM-de2gh2 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
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-de2gh2 жыл бұрын
@@Frankslaboratory Alright Frank, the coffee has been drank and the video watched. Behold! A tribute: kzbin.info/www/bejne/porYhKV-fL5jmKM
@Frankslaboratory2 жыл бұрын
@@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
@Eternam2 жыл бұрын
Great work as always, following you and Radu, learning a lot with you! thank you so much guys!
@Frankslaboratory2 жыл бұрын
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.
@JulsGeekPI2 жыл бұрын
Thanks, with this help i will at least finish my project on codepen, a simple vtuber on javascript, many thanks!
@chetanjain46162 жыл бұрын
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
@CoolScratcher2 жыл бұрын
Frank this is awesome. Gonna try this sometime if I have time :D
@Frankslaboratory2 жыл бұрын
Hi CS, thank you, glad you like it, thanks for letting me know!
@StellarWeb0082 жыл бұрын
I was waiting for your video from a month
@Frankslaboratory2 жыл бұрын
Hi, thank you for waiting, I was very busy but I'm back now :D
@viktorsarge62852 жыл бұрын
Awesome as always. This was a far more entertaining way of learning about working with the microphone than reading some API documentation.
@Frankslaboratory2 жыл бұрын
Thanks Viktor, yea I think it's better to learn with something visual, at least for me, it's easier to remember
@odyeksamuel65042 жыл бұрын
who unliked this???? Awesome content Frank. Thank you
@Frankslaboratory2 жыл бұрын
Hi Odyek, thank you !! :)
@sxmourai68972 жыл бұрын
Awesome video like always keep going ! Waiting for the next one
@Frankslaboratory2 жыл бұрын
Thanks Samourai, I appreciate your support!
@alishata89 ай бұрын
Like before watching 👍
@Frankslaboratory9 ай бұрын
Thank you Ali
@danigolmestre2 жыл бұрын
Very good as always Frank, congratulations and thank you for sharing!
@Frankslaboratory2 жыл бұрын
Danilo! Thank you for giving me your feedback, I appreciate it
@bozidarbralic19378 ай бұрын
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.
@adlearn360 Жыл бұрын
Good work ❤
@Frankslaboratory Жыл бұрын
I'm here to help ❤
@devsspace19185 ай бұрын
this is super cool
@Frankslaboratory5 ай бұрын
Thank you, I need to make a follow up to this with some new things soon
@andrewcool4822 жыл бұрын
Frank! Great as usually!!!
@Frankslaboratory2 жыл бұрын
Hi Andrew, thank you!!
@shaiknoorulhuda57792 жыл бұрын
It is very supper cool tutorial
@Frankslaboratory2 жыл бұрын
Glad you found some value
@lakshman5872 жыл бұрын
This is cool!!!
@Frankslaboratory2 жыл бұрын
Thanks Lakshman
@sebastianmoyano73132 жыл бұрын
Que buen contenido tiene este canal!! Éxitos muy buen tutorial 👌!!
@Frankslaboratory2 жыл бұрын
Hi Sebastian, thank you ❤
@toastbot86632 жыл бұрын
Great tut, u are amazing in teaching!
@Frankslaboratory2 жыл бұрын
really? Thank you, very kind to say that
@gaurav561crazy52 жыл бұрын
Nice now I am ready to make a dj ,lol
@Frankslaboratory2 жыл бұрын
Yes, there are many really cool visualisations that can be done with this technique, I will make more if people like audio tutorials
@_GOUTHAM2 жыл бұрын
you guys are really really amazing really my jaw dropped
@Frankslaboratory2 жыл бұрын
Really? Thank you. We can do much more if people like it. Maybe soon :)
@_GOUTHAM2 жыл бұрын
may be that soon come early
@naseef90 Жыл бұрын
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
@unknown-bx8my2 жыл бұрын
very useful thank you
@Frankslaboratory2 жыл бұрын
I'm here to help :D
@tarun76172 жыл бұрын
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 🤔
@Frankslaboratory2 жыл бұрын
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
@tarun76172 жыл бұрын
@@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
@Frankslaboratory2 жыл бұрын
@@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
@tarun76172 жыл бұрын
@@Frankslaboratory I'll love to try all new stuff teacher Franks can provide :)
@rigenos2 жыл бұрын
New vid, nice!
@Frankslaboratory2 жыл бұрын
Thank you mr Robot
@stevecogbill5620 Жыл бұрын
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?
@PixelatedBrain72 жыл бұрын
he's back 🤑
@Frankslaboratory2 жыл бұрын
I am back indeed, hi :D
@januariopinto_2 жыл бұрын
Assuming it was the KZbin 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.
@Frankslaboratory2 жыл бұрын
Hi Januario, it was KZbin, 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
@anon-yn9rc3 ай бұрын
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
@mixtapeverse11848 ай бұрын
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!
@Frankslaboratory8 ай бұрын
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.
@mixtapeverse11848 ай бұрын
@@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!
@Frankslaboratory8 ай бұрын
@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
@mixtapeverse11848 ай бұрын
@@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!
@ranjithmuthu2 жыл бұрын
How can i add radio url?
@flemingagogo2 жыл бұрын
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?
@Frankslaboratory2 жыл бұрын
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
@funtocode59042 жыл бұрын
Helpfull video! Btw small youtuber here!
@Frankslaboratory2 жыл бұрын
Hi, thank you, good luck with your channel, it takes a while to get some momentum so keep going :D
@funtocode59042 жыл бұрын
@@Frankslaboratory thank you !
@brycesmith18972 жыл бұрын
Whenever I get to adding the .getVolume method at 46:20 it makes the entire visualizer disappear any ideas on where I went wrong?
@parkerbelholland10372 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
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
@JosephJones-t9f6 ай бұрын
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?
@Sammysapphira4 ай бұрын
It means analyzer is not defined.
@raghvendra872 жыл бұрын
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!
@Frankslaboratory2 жыл бұрын
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 :)
@Frankslaboratory2 жыл бұрын
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
@eleanortay23892 жыл бұрын
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?
@Frankslaboratory2 жыл бұрын
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?
@Frankslaboratory2 жыл бұрын
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
@wiebeiv78652 жыл бұрын
@@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?
@riccardoluise86302 жыл бұрын
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?
@Frankslaboratory2 жыл бұрын
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
@riccardoluise86302 жыл бұрын
@@Frankslaboratory thank you for the super clear and fun tutorial! looking forward to learn many cool things, thank you! :)
@shaiknoorulhuda57792 жыл бұрын
Hi how are you bro I am thinking you are Topper in js with canvas
@Frankslaboratory2 жыл бұрын
Thank you Noorulhuda. Very kind
@ohhyouknowr2 жыл бұрын
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!
@ohhyouknowr2 жыл бұрын
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?
@Frankslaboratory2 жыл бұрын
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
@InfinitelyAmplified2 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
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
@InfinitelyAmplified2 жыл бұрын
@@Frankslaboratory Thanks, I got it!
@richmakercrypto Жыл бұрын
It didn't work on iOS. Has anyone had this problem?
@Frankslaboratory Жыл бұрын
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 :)
@alphonceokinyi49902 жыл бұрын
I am struggling to understand am still new to javascript.
@Frankslaboratory2 жыл бұрын
Hi, it takes a while to learn the basics, keep going, I always recommend doing a complete beginner JS tutorial before starting projects
@alexander74312 жыл бұрын
KZbin #RETURNDISLIKE
@Frankslaboratory2 жыл бұрын
Haha, there is always someone who doesn't like my projects. It's alright :D
@alexander74312 жыл бұрын
@@Frankslaboratory No man, you have cool content. I wrote this comment to express my dissatisfaction with the removed dislikes on KZbin.
@Frankslaboratory2 жыл бұрын
I can still see dislikes. Didnt know about this update