If you want more vanilla JavaScript audio effects check out Radu's Melody Maker app tutorial ua-cam.com/video/JNtuLw2fybo/v-deo.html. Have you used Web Audio API before or is this your first time? Click the LIKE please :D
I definitely plan on checking your buddies Melody Maker, to be sure. But, I am currently swamped with a massive amount of classes, yet took a detour with your tutorials. I have messed around with audio spectrum visualizations and have quite a collection, but never hand coded them from scratch.
Your videos are great and I've learned tons from them, so thank you. I have a question: do you have any idea how to stream audio directly from a website - say, UA-cam - to an analyzer? I've been trying to get the navigator.mediaDevices API to work, but I'm not having any luck and no one seems to have any usable answers.
This is my first time really competing a project after a long tutorial. I love this! I was conflicted between artistic work and coding and yo definitely bought a new light! :D
I think it was really helpful to show the process. It shows beginners that we don't always get it right and there is no magic at play here - often it is just trial-and-error. Whereas if you just give the "correct"/final values with no explanation, it becomes this unexplained leap of logic that confuses people and makes you look like some kind of math genius. Overall, great tutorial. As a seasoned JS professional, some parts were very slow but that is to be expected when you are targeting all skill levels. I just watched it on 1.5x speed and got what I needed from it, as I haven't done much work with canvas or the WebAudio API.
Hi Greg, thank you for letting me know, I will keep this in mind. I am not a genius in any sense of the word, I just spend a lot of time with the code until I work it out. Then I usually edit it so it respects peoples time and they get just the important parts in final tutorial.
@@Frankslaboratory It's definitely a balance. Sometimes it might be enough to mention that you had to experiment with a number of different values when initially working this out, instead of showing the process. Just something to remind people of the reality of programming, so they don't have doubts when they struggle with it or take much longer to write their own code.
@@g01dHaCkEr I know some people like Coding train can do all of this real time. I'm not like that, I'm basically a beginner, takes me a long time to build my projects still, but I like the process. Thanks for taking the time to give me feedback Greg, much appreciated
Thank you for this. I have recently been made redundant and I have a lot of time, which I feel like I should be using for SE learning to become more employable, but I got stuck this week obsessing over music production. This has helped me bring myself back to coding so I can at least think about adding things to my portfolio. I'm trying to focus on learning to use the web audio api to make audio tools and toys because it's what will make me sit down and code. This was my first attempt at using it and was a great start for me!
Hi, sorry to hear about your work. Yes, it helps if you make the projects fun, I also chose my projects carefully to keep myself motivated, Good luck with your coding studies! :) web audio api is a powerful tool, I will make tutorials on this topic
Thanks for including 3-5 second pauses in your speaking while you do something. So much instruction is non-stop talking, and your way gives the brain a chance to catch up.
I am a too-fade-up guy for routine jobs. You are inspiring me to try new things, even though I have an obsolete 32bit Toshiba P205-6237. Thanks Frank and your friend for dropping colors in to my boring life. thanks!
It was fascinating! I enjoyed it very much. I couldn't stop from the beginning to the end, everything is clear and well explained. It took me more than two hours but I finished the project and continue to the next video :) Thank you very much and keep uploading more projects.🙏
You are a great teacher, developer and designer, I'm learning a lot. I've seen your course on generative art with coding fractals, it was marvelous. I started to learn web development as a way of using the capabilities of browser to expand audio-visual. You are the first one I've found who actually uses recursion for a visible purpose. Thank you so much!!!!
Hi Herbert, I like to build things step by step, it makes it easier to navigate in code and prevent issues and bugs from coming up too often. Glad you like it, thank you :)
I just started learning to code with any technology past the 1980's. I love the pace you go at, very beginner friendly and informative. I learn something new with every video. Thank you.
Not gonna lie it took me a 2+ hours of research and experimenting to learn how to make a bar graph visualizer, I really wish I had found this video much much sooner, I look forward to more of your content in the future
This was so helpful :) I coded along, great explanations. I like seeing your process as to how you get to a specific look, helps one realize what values to tweak when wanting a specific visual.
Good to hear Damien, I'm making a follow up tutorials soon, there are many more things that can be done with Web Audio API and browser generated sounds
Frank, I've been a subscriber for quite some time now but have never commented on one of your videos. I just dropped in to say how much I appreciate all your content and that you are spreading your knowledge. Will be watching for as long as you keep it up!
Hi Hampus, nice to meet you. Thank you for taking the time to let me know, it's nice to see a comment like this. Good luck with your coding projects :) Feel free to comment more often :D
Thank you very much. I don't know much yet, but I have found your video very instructive and pleased to my ears, and eyes. I think you have a teaching method that I find it well established, and clear. I think you enjoy very much teaching and what you do, so that makes your video one of my favorite so far. Thank you.
Hi Lenin, thank you so much for such a nice feedback, I enjoy teaching because I can choose fun projects that I'm interested in. Very happy to read your comment, thank you for taking the time to let me know ❤
The audio to base64 string blows my mind. Just a few second long audio file, generated a massive long string of characters. Unbelievable-but it worked! This was 134,673 long!
It's basically breaking down the sound file into a mid stage, not all the way to ones and zeros but it is converting data into bit code. We don't work with this often but computers do it all the time to transfer images, sound and video over the internet. It's interesting. I will make more experiments to show what can be done here.
Frank, would you do a full blown tutorial on your fish game with the exploding bubbles and animated water just as you displayed. Also, would you be interested in selling some of your complete complete projects with source code?
Awesome !! We can create more about JavaScript 😄 , and on top of that collaboration is cool ^w^. Not gonna lie , i always get amazed by the creative on the thumbnail 😄 Thank you Soo much franks
Hi Tarun, it's been a while since we spoke. For some reason I keep making these 1 hour videos so it takes me forever to release one haha, how is your learning going, working on something interesting?
@@Frankslaboratory working on a game in which you need to eat more and more candy to grow , you use mouse to control it , I want to get it as much more interesting so it'll take time but if I'm satisfied with end result , I'll be glad I put time to it , I'm going to learn jQuery too , and soon going to learn about multiplayer game dev , but exams are still In my way , and because of my exams I barely get on internet .... Just to watch more of your videos as I love them get to learn more and more , and an hour long videos does took a lot of effect to create and we all appreciate it
@@tarun7617 Tarun you are keeping yourself busy all the time I see. You are a hard worker, you will be professional coder much faster than other people. Let me know when the game is playable if you want to share it. Im curious about your projects
@@Frankslaboratory You know frank in chess, the hardest portion of the game, is indeed the End Game! It requires the most calculations and every move in particular has either, disastrous or beneficial outputs. I adore your art work Frank!
Hi Micah, thank you, I'm still learning how to make my videos easy to follow, hopefully I will keep improving to help more people with creative coding. I appreciate your feedback thank you for taking the time to leave a comment
Hi Simon, thank you. Modern JavaScript has a lot of tools that make things like this easier. I want to make more advanced version eventually but I will give it some time and experiment, in the meantime my tutorials will focus on other creative coding projects :)
I just discovered this channel, and can't wait to dive into many more videos! Great tutorial, I've been wanting to learn this exact thing ever since I began!!! Thanks so much.
Hey there Frank, I've really enjoyed coding along with you and particularly enjoy seeing you experiment with the values. It really encourages me to try different variations. Thanks again for this fun tutorial.
Hi Pierson, happy to hear that you liked it and congratulations on building your own visualizer (I assume you did :)) I made a follow up with 10 more different visualizers, I could make 100, I have so many ideas but not sure anyone would watch that. I will make advanced version with physics, particles and advanced movement eventually, then it will react to sound even more 'organically'. Thanks for letting me know you liked it :)
@@Frankslaboratory Happy Easter Frank, yes thanks to you, I have really enjoyed making a variety of audio visualizers ;-). I would definitely enjoy watching your advanced versions with physics and/or particles whenever you make them. Have a great bank holiday weekend Frank.
4:35 the sound doesn't play when I click the button, I'm wondering if this could be related to the error saying 'Target container is not a DOM element'.
Hi Alice, sometimes when you get a javascript error it stops all other JavaScript from executing, so you should sort out any console logs before continuing. Even if those errors are unrelated to the particular issue you are having. I don't see how you would get that error if you followed my code, I assume you made some modifications along the way
Thank you so much, even though i didn't understand some of the equations used in this project. I managed to create a basic visualizer of my own. I think practice makes perfect.
Hi Thomas, it was new for me as well, took me a while to wrap my head around it. I think when you use it couple of times it becomes easier to understand. I made a follow up video to this where I build 10 different visualizers from this code so I practiced a lot haha
Great Channel I have ever seen before thinks a lot developers, I hope u will make more cool videos like this, but wait I want one cool video from u, so please make a video on voice changing and sounds changing to any voice like monster voices with some background noices...
Hi, Frank! I coded along until the very end of the video. As I said in a commente in another of your videos, it's addictive. I'm curious to know how did you learn all this stuff. Thanks a lot for sharing your knowledge with us. Regards from Brazil.
This is honestly one of the best n00b code-along video's I've seen. Great concept, and you do a good job of keeping a fast enough pace to actually make sure the project gets finished, but still explaining the concepts and your reasoning. Please keep that, it really added to the learning experience. This is a wonderful accessible early project! Smashed that subscribe
Hi Sabrina, nice to meet you, wow this is very kind feedback, thank you so much :) I make two types of videos, if it says 'for beginners' in title I try to explain almost everything I'm doing, so it makes me very happy to read your comment. I will make more beginner friendly stuff so it's accessible for everyone :)
Gonçalo, nice to meet you :D I noticed some browsers run the sound analyzer without base64, but to avoid people leaving comments that it doesn't work for them, I went with what I thought was the safest most compatible approach. Thank you for testing though, it's always good to know :)
Frank, thanks for this, a joy to watch and learn. I discovered Radu’s channel thanks to your link. The browser based machine vision system was perfect for me. You and Radu have some great engineering videos that really goes beyond the usual web page focus of many of the YT instructionals. I really appreciate the effort that you guys put into your excellent instructionals.
Hi Carl, thank you, very kind of you to say that. Me and Radu focus on a niche topic of creative coding, I don't think it's covered properly in tutorials so we come up with a lot of unique stuff. I hope more channels start doing that, because there is so much to cover, I could be making just videos about web audio API for 1 year for example :D
hey man, i'll level with you: this is the best beginner-friendly tutorial on Visualizers that I yet to have seen - I sincerely thank you for putting out such amazing content for anyone for free. Although, I would really appreciate it if you can explain some of the unfamiliar concepts such as bufferLength and that sort of stuff for us too, because I think understanding how something works will eventually leave the strongest impression. Nevertheless, amazing video!!
Hi Oz, nice to meet you. Really? This is great feedback thank you for letting me know. I wanted to keep this episode beginner friendly, but I have plans for more advanced audio visualizer tutorials in the future. Thanks for letting me know, I will go more indepth next time
@@Frankslaboratory I got it done thanks to you. I wish I could post a screenshot and show you. I'll post a link to the project when ready. I think you'll like it...
This is so cool, Frank! I honestly didn't even know about the Audio Web API, so now I've got another rabbit hole to dive into. I really want to try this and experiment with it. I am in the middle of creating a portfolio and was hoping to include something unique and interesting so I hope it's cool with you if I create some form of audio visualizer to include. Additionally, I'm super interested in audiowave synthesizer that you demonstrated. Super cool to try some different wave shapes.
Hi Arthur, this is the first time I played with Audio web API properly, there is a lot in there I want to explore, i will wait to see if people want more on this. I am releasing a follow up video where I take final codebase and use canvas techniques to make it into 10 very different shapes that move to music. Looking forward to see what you can come up with, feel free to share your visualiser with us. My videos are free so you don't need to ask me to use it anywhere you want :)
@@Frankslaboratory Will do. Thank you for being so generous with your content and sharing your knowledge with us. I am eternally grateful for how much your channel has taught me, and I look forward to that next video. Keep it up, Frank! You videos are very entertaining and very well edited as well.
@@Frankslaboratory Same here. I feel like your channel is one of the only channels that is genuinely focused on teaching and experimenting rather than just being popular. Don't get me wrong, I know you are looking for growth too so that more can experience such a great language that is JS, which I can see you're achieving, but I just mean that you don't sacrifice good content for growth's sake, and it really shows. I haven't finished the entire project yet, but I've managed to get some visual bars and did some experimenting with them on my CodePen and I'm pretty happy with it, but I'm also intrigued about what else can be done. Will definitely be exploring some more.
I think sound cloud generates a wave based on volume levels right? Volume levels are easy to capture, the entire code that would do that would need it's own tutorial, I might do it eventually
I'd love to see a github repo set up for this where you can add some documentation. Specifically, a list of settings you have used to generate a specific waveform
I had them same question and I can't seem to figure it out. I have the .io link to the radio stations stream but can't figure out how to get it implemented the closest I've come to figuring it out is getting the audio for the visualizer through the microphone on the computer
Only 10 minutes in but really enjoying how you break everything down. I'm a Digital Producer trying out different languages and this tutorial is great.
Great endeavor but remember should be ready for under the hood upgrade or work on building solid sound system and speaker driver separate but compatible with microcontroller that generate pattern consistently over various terrain with the same pattern that need Bose canceling technology
If you want more vanilla JavaScript audio effects check out Radu's Melody Maker app tutorial ua-cam.com/video/JNtuLw2fybo/v-deo.html. Have you used Web Audio API before or is this your first time? Click the LIKE please :D
Another awesome project from the Frank's laboratory. :) I love the creative approach you have in your videos. Very inspiring!
@@AleksPopovic Hi Aleks, thank you, very kind of you to say
I definitely plan on checking your buddies Melody Maker, to be sure. But, I am currently swamped with a massive amount of classes, yet took a detour with your tutorials. I have messed around with audio spectrum visualizations and have quite a collection, but never hand coded them from scratch.
Please record your voice at coding time ...
Your videos are great and I've learned tons from them, so thank you. I have a question: do you have any idea how to stream audio directly from a website - say, UA-cam - to an analyzer? I've been trying to get the navigator.mediaDevices API to work, but I'm not having any luck and no one seems to have any usable answers.
This was exactly what I was looking for. I wanted to learn javascript, but also wanted a custom audio visualiser. Thank you very much.
There is a whole other universe of Javascript out there to explore. You make it so simple to understand and so fun to learn. Thank you!
This is my first time really competing a project after a long tutorial. I love this! I was conflicted between artistic work and coding and yo definitely bought a new light! :D
Nice thank you I need this!!! 🙏🏻🙏🏻🙏🏻
I hope it helps, thanks for letting me know
I think it was really helpful to show the process. It shows beginners that we don't always get it right and there is no magic at play here - often it is just trial-and-error.
Whereas if you just give the "correct"/final values with no explanation, it becomes this unexplained leap of logic that confuses people and makes you look like some kind of math genius.
Overall, great tutorial. As a seasoned JS professional, some parts were very slow but that is to be expected when you are targeting all skill levels. I just watched it on 1.5x speed and got what I needed from it, as I haven't done much work with canvas or the WebAudio API.
Hi Greg, thank you for letting me know, I will keep this in mind. I am not a genius in any sense of the word, I just spend a lot of time with the code until I work it out. Then I usually edit it so it respects peoples time and they get just the important parts in final tutorial.
@@Frankslaboratory It's definitely a balance. Sometimes it might be enough to mention that you had to experiment with a number of different values when initially working this out, instead of showing the process. Just something to remind people of the reality of programming, so they don't have doubts when they struggle with it or take much longer to write their own code.
@@g01dHaCkEr I know some people like Coding train can do all of this real time. I'm not like that, I'm basically a beginner, takes me a long time to build my projects still, but I like the process. Thanks for taking the time to give me feedback Greg, much appreciated
Thank you for this. I have recently been made redundant and I have a lot of time, which I feel like I should be using for SE learning to become more employable, but I got stuck this week obsessing over music production. This has helped me bring myself back to coding so I can at least think about adding things to my portfolio. I'm trying to focus on learning to use the web audio api to make audio tools and toys because it's what will make me sit down and code. This was my first attempt at using it and was a great start for me!
Hi, sorry to hear about your work. Yes, it helps if you make the projects fun, I also chose my projects carefully to keep myself motivated, Good luck with your coding studies! :) web audio api is a powerful tool, I will make tutorials on this topic
Thanks for including 3-5 second pauses in your speaking while you do something. So much instruction is non-stop talking, and your way gives the brain a chance to catch up.
Hi John, thank you for this feedback, I will try to remember to do that more often when recording tutorials
@@Frankslaboratory many ppl watch at 1.5x, so a 6sec pause is actually only 4 secs. same goes for podcasts - sloooooow down everyone!
Dude i saw your vid in my feed and just knew that i had to watch it immediately.
Keep going this is amazing
Hi Tanay. Thank you for letting me know that this is the type of content you like. I will try to make more like this 🎶
I am a too-fade-up guy for routine jobs. You are inspiring me to try new things, even though I have an obsolete 32bit Toshiba P205-6237. Thanks Frank and your friend for dropping colors in to my boring life. thanks!
You are a Javascript ARTIST 🎨 🎶🎶🎶👍👍👍👍
Thank you, very kind of you to say ❤
@34:32 Holding down the shift key and pressing 'end' will highlight the entire line. Then just ctrl-x and paste wherever.
yooo
I'm studying in coding bootcam, and this video inspired me to create my solo project
its real magic
ty!
I think it's great that you share your process on how you come up with these effects!
Thank you :)
It was fascinating! I enjoyed it very much. I couldn't stop from the beginning to the end, everything is clear and well explained.
It took me more than two hours but I finished the project and continue to the next video :)
Thank you very much and keep uploading more projects.🙏
You are a great teacher, developer and designer, I'm learning a lot. I've seen your course on generative art with coding fractals, it was marvelous. I started to learn web development as a way of using the capabilities of browser to expand audio-visual. You are the first one I've found who actually uses recursion for a visible purpose. Thank you so much!!!!
man you are underrated , you deserve more. thanks for this joyful tutorial
Hi Haytham, thank you, very kind to say that
God this is so cool.
I remember when I wanted to make an online soundboard, but ran into constant issues.
I love this channel.
Hi Herbert, I like to build things step by step, it makes it easier to navigate in code and prevent issues and bugs from coming up too often. Glad you like it, thank you :)
I just started following your youTube, I love how you make things so simple.
Hi. Nice to meet you. Thank you ❤
I just started learning to code with any technology past the 1980's. I love the pace you go at, very beginner friendly and informative. I learn something new with every video. Thank you.
Not gonna lie it took me a 2+ hours of research and experimenting to learn how to make a bar graph visualizer, I really wish I had found this video much much sooner, I look forward to more of your content in the future
Hi Jergan, nice to meet you. Some techniques don't have many tutorials online yet, I'm trying to contribute a little bit
This was so helpful :) I coded along, great explanations. I like seeing your process as to how you get to a specific look, helps one realize what values to tweak when wanting a specific visual.
This series of videos is stunning. I'm completely hooked.
Good to hear Damien, I'm making a follow up tutorials soon, there are many more things that can be done with Web Audio API and browser generated sounds
Frank, I've been a subscriber for quite some time now but have never commented on one of your videos. I just dropped in to say how much I appreciate all your content and that you are spreading your knowledge. Will be watching for as long as you keep it up!
Hi Hampus, nice to meet you. Thank you for taking the time to let me know, it's nice to see a comment like this. Good luck with your coding projects :) Feel free to comment more often :D
Man, I don't have words! But thanks a lot! You giving so much to the community!
Hi, thank you for such a nice feedback ❤ I hope people find some value in this video
This tutorial is just gorgeous! Thank you so much for such a detailed and explained example!
Thank you, glad to hear that
A good and efficient lesson. Very good flow, starting with the basics while foreshadowing to advanced stuff. Thank you!
i finished the project it was super insightful thanks for making this video!
nice, congratulations on completing the project
Thank you very much for your tutorial! I used it to connect some frequencies to bones to let my character move by music.
Thank you very much. I don't know much yet, but I have found your video very instructive and pleased to my ears, and eyes. I think you have a teaching method that I find it well established, and clear. I think you enjoy very much teaching and what you do, so that makes your video one of my favorite so far. Thank you.
Hi Lenin, thank you so much for such a nice feedback, I enjoy teaching because I can choose fun projects that I'm interested in. Very happy to read your comment, thank you for taking the time to let me know ❤
Very nice video once again, will code along tomorrow
Hi Jees. I hope you like it and have fun coding
Love this stuff been wanting to get into creative code as a Junior Web Dev and this is the perfect way to start for me!
Hi Zein, nice to meet you. Creative coding and front end web dev goes well together, good luck with your studies
First time I had fun while doing research for projects for university in ages, thanks a lot for that man :D
Hi Gregor, are you doing audio project for university? Thank you for such a nice feedback, it's nice to see.
@@Frankslaboratory We need to develop a music player with js, so we needed some visualization of music :)
@@gregorschwezow8883 Great project idea, I would enjoy working on something like that. My school projects were boring haha.
The audio to base64 string blows my mind. Just a few second long audio file, generated a massive long string of characters. Unbelievable-but it worked!
This was 134,673 long!
It's basically breaking down the sound file into a mid stage, not all the way to ones and zeros but it is converting data into bit code. We don't work with this often but computers do it all the time to transfer images, sound and video over the internet. It's interesting. I will make more experiments to show what can be done here.
@@Frankslaboratory I thought it was quite trippy Frank. Quite cryptographic!
Frank, would you do a full blown tutorial on your fish game with the exploding bubbles and animated water just as you displayed. Also, would you be interested in selling some of your complete complete projects with source code?
I adore your programmatic artwork!
@@johnadriandodge It was indeed. I also use base64 string for advanced pixel effects in some other videos it's cool.
Awesome !! We can create more about JavaScript 😄 , and on top of that collaboration is cool ^w^.
Not gonna lie , i always get amazed by the creative on the thumbnail 😄
Thank you Soo much franks
Hi Tarun, it's been a while since we spoke. For some reason I keep making these 1 hour videos so it takes me forever to release one haha, how is your learning going, working on something interesting?
@@Frankslaboratory working on a game in which you need to eat more and more candy to grow , you use mouse to control it , I want to get it as much more interesting so it'll take time but if I'm satisfied with end result , I'll be glad I put time to it , I'm going to learn jQuery too , and soon going to learn about multiplayer game dev , but exams are still In my way , and because of my exams I barely get on internet .... Just to watch more of your videos as I love them get to learn more and more , and an hour long videos does took a lot of effect to create and we all appreciate it
@@tarun7617 Tarun you are keeping yourself busy all the time I see. You are a hard worker, you will be professional coder much faster than other people. Let me know when the game is playable if you want to share it. Im curious about your projects
Awesome brother. We love the music javascript videos!
Never know what one will discover with slight adjustments to the numbers. Amazing!
Hi John, yes, experimenting with values at the end is the best part :D
@@Frankslaboratory You know frank in chess, the hardest portion of the game, is indeed the End Game! It requires the most calculations and every move in particular has either, disastrous or beneficial outputs. I adore your art work Frank!
golly gee Frank, one more.
www.product66.com/websandbox/aboriginal/audiospectrum.html
honestly, I'm blown away
Glad you like :)
Thank you for your detailed tutorial, I got many values from this!
Good stuff man thanks for explaining this stuff in such a simple way. You're a really good teacher!
Hi Micah, thank you, I'm still learning how to make my videos easy to follow, hopefully I will keep improving to help more people with creative coding. I appreciate your feedback thank you for taking the time to leave a comment
Very cool tutorial. Thank you. I didn't know there was such an easy way to get FFT data. And I like your style, including your onscreen experiments.
Hi Simon, thank you. Modern JavaScript has a lot of tools that make things like this easier. I want to make more advanced version eventually but I will give it some time and experiment, in the meantime my tutorials will focus on other creative coding projects :)
Awesome, this is very important.
Audio + canvas = 🔥❤
Its very useful to know how to control sounds. I came up with many creative ideas while working on this. Future tutorials maybe 🎶🎵
Are there ways to play with the bars radius ? 🤩.
Superb tutorial, thanks for sharing knowledge 👍👍👍
I hope you know how much you are a super teacher ! THX a lot !
Hi Ricky, thank you, very kind of you to say
Hi! i have to say, You are the best online teacher i've seen! thanks for sharing your work! I wish you more subscribers :D
Thank you Gerhok. Very kind to say that 😊
What did you use to put the visualizer made into your video? Thanks!
First video i see of your channel instantly subbed
Nice to meet you. Good to have you here Ash
I just discovered this channel, and can't wait to dive into many more videos! Great tutorial, I've been wanting to learn this exact thing ever since I began!!! Thanks so much.
Your tutorials are next level. I am learning so much with you. Thank you for all your work. It is awesome.
Hey there Frank, this is an awesome tutorial. ;-)
Hi Pierson, thank you, hope you're well, finally my video is done and I can go out enjoy the nice UK weather haha
@@Frankslaboratory ...hehehehe....enjoy the fresh air Frank, you'd better be quick cos the sun has finally come out. ;-)
Love you dude. Thanks for your great tutorials!
WOOOOOOWWW you are my hero bro!
Hi, thank you, I guess you like this one, good to know :)
Hey there Frank, I've really enjoyed coding along with you and particularly enjoy seeing you experiment with the values. It really encourages me to try different variations. Thanks again for this fun tutorial.
Hi Pierson, happy to hear that you liked it and congratulations on building your own visualizer (I assume you did :)) I made a follow up with 10 more different visualizers, I could make 100, I have so many ideas but not sure anyone would watch that. I will make advanced version with physics, particles and advanced movement eventually, then it will react to sound even more 'organically'. Thanks for letting me know you liked it :)
@@Frankslaboratory Happy Easter Frank, yes thanks to you, I have really enjoyed making a variety of audio visualizers ;-).
I would definitely enjoy watching your advanced versions with physics and/or particles whenever you make them.
Have a great bank holiday weekend Frank.
@@piersonlippard2911 Good to hear, thank you, happy Easter Pierson :)
Frank is the best! Thanks for the education
4:35 the sound doesn't play when I click the button, I'm wondering if this could be related to the error saying 'Target container is not a DOM element'.
Hi Alice, sometimes when you get a javascript error it stops all other JavaScript from executing, so you should sort out any console logs before continuing. Even if those errors are unrelated to the particular issue you are having. I don't see how you would get that error if you followed my code, I assume you made some modifications along the way
Hi! Great video, I will be learning this one :D thank you!!!
I hope you like it, I also made part 2 where I create 10 different visualizers
@@Frankslaboratory you are a machine!! 👌 respect!
Thank you so much, even though i didn't understand some of the equations used in this project. I managed to create a basic visualizer of my own. I think practice makes perfect.
Hi Thomas, it was new for me as well, took me a while to wrap my head around it. I think when you use it couple of times it becomes easier to understand. I made a follow up video to this where I build 10 different visualizers from this code so I practiced a lot haha
Hello,
So many fun and pleasure time to spend with you and making some interesting, fantastic .!AMAZING!. things !!
Hi Natalia. Glad you had fun with my video. Thank you for letting me know ❤
Your videos are constantly enriching my knowledge on web programming. thank you!
Hi Joseph. Very happy to hear that thank you for letting me know ❤
First time on youtube awesome knowledge thank you so much
Hi Prakash, I'm glad you found some value in the video
Great Channel I have ever seen before thinks a lot developers, I hope u will make more cool videos like this, but wait I want one cool video from u, so please make a video on voice changing and sounds changing to any voice like monster voices with some background noices...
Hi Allie, that's a great idea, I would like to do something with voice morphing, hmm, putting it on my list
@@Frankslaboratory Dear Sir, thank u so much...
Beautiful and Powerful that I've been searched it for a long time ago ,thanks so much.
Thank you. Very kind of you to say. I'm glad you like it :)
Love this video! Would very much enjoy to see this with particle system!
Hi, Frank! I coded along until the very end of the video. As I said in a commente in another of your videos, it's addictive. I'm curious to know how did you learn all this stuff. Thanks a lot for sharing your knowledge with us. Regards from Brazil.
great video man thank you for uploading
This is honestly one of the best n00b code-along video's I've seen. Great concept, and you do a good job of keeping a fast enough pace to actually make sure the project gets finished, but still explaining the concepts and your reasoning. Please keep that, it really added to the learning experience. This is a wonderful accessible early project! Smashed that subscribe
Hi Sabrina, nice to meet you, wow this is very kind feedback, thank you so much :) I make two types of videos, if it says 'for beginners' in title I try to explain almost everything I'm doing, so it makes me very happy to read your comment. I will make more beginner friendly stuff so it's accessible for everyone :)
This is such an enjoyable video! I loved your presentational style and clarity of testing each line you write. Cheers!
Thank you for such a nice feedback. I will try to do more of that
Hey Frank! Amazing tutorial as always. Audio working fine on Chrome without encoding to base64!
Gonçalo, nice to meet you :D I noticed some browsers run the sound analyzer without base64, but to avoid people leaving comments that it doesn't work for them, I went with what I thought was the safest most compatible approach. Thank you for testing though, it's always good to know :)
Frank, thanks for this, a joy to watch and learn. I discovered Radu’s channel thanks to your link. The browser based machine vision system was perfect for me. You and Radu have some great engineering videos that really goes beyond the usual web page focus of many of the YT instructionals. I really appreciate the effort that you guys put into your excellent instructionals.
Hi Carl, thank you, very kind of you to say that. Me and Radu focus on a niche topic of creative coding, I don't think it's covered properly in tutorials so we come up with a lot of unique stuff. I hope more channels start doing that, because there is so much to cover, I could be making just videos about web audio API for 1 year for example :D
hey man, i'll level with you: this is the best beginner-friendly tutorial on Visualizers that I yet to have seen - I sincerely thank you for putting out such amazing content for anyone for free. Although, I would really appreciate it if you can explain some of the unfamiliar concepts such as bufferLength and that sort of stuff for us too, because I think understanding how something works will eventually leave the strongest impression. Nevertheless, amazing video!!
Hi Oz, nice to meet you. Really? This is great feedback thank you for letting me know. I wanted to keep this episode beginner friendly, but I have plans for more advanced audio visualizer tutorials in the future. Thanks for letting me know, I will go more indepth next time
Great Video!!! I'm working on an app that brings in audio encoded in base64 using ajax. This has helped me greatly. Thank you!!!
Interesting project idea. Glad you found some value !
@@Frankslaboratory I got it done thanks to you. I wish I could post a screenshot and show you. I'll post a link to the project when ready. I think you'll like it...
Thanks man you are full of content can't wait for more like this 😁😁
Thank you Ade, very kind of you
Very useful and datiled tutorial! I learnt a lot from it, thank you so much!
I'm doing a project like this one....thanks for the video....keep going
🔥
Good luck with your project
Awesome tutorial
Glad you like it :)
Hey ! Would it be possible to have access to a github repo with the video's code in it please :) ?
This is so cool, Frank! I honestly didn't even know about the Audio Web API, so now I've got another rabbit hole to dive into. I really want to try this and experiment with it.
I am in the middle of creating a portfolio and was hoping to include something unique and interesting so I hope it's cool with you if I create some form of audio visualizer to include.
Additionally, I'm super interested in audiowave synthesizer that you demonstrated. Super cool to try some different wave shapes.
Hi Arthur, this is the first time I played with Audio web API properly, there is a lot in there I want to explore, i will wait to see if people want more on this. I am releasing a follow up video where I take final codebase and use canvas techniques to make it into 10 very different shapes that move to music. Looking forward to see what you can come up with, feel free to share your visualiser with us. My videos are free so you don't need to ask me to use it anywhere you want :)
@@Frankslaboratory Will do. Thank you for being so generous with your content and sharing your knowledge with us. I am eternally grateful for how much your channel has taught me, and I look forward to that next video.
Keep it up, Frank! You videos are very entertaining and very well edited as well.
@@coltonaallen Thanks Arthur, you always have something positive to say, I always enjoy chatting with you
@@Frankslaboratory Same here. I feel like your channel is one of the only channels that is genuinely focused on teaching and experimenting rather than just being popular. Don't get me wrong, I know you are looking for growth too so that more can experience such a great language that is JS, which I can see you're achieving, but I just mean that you don't sacrifice good content for growth's sake, and it really shows.
I haven't finished the entire project yet, but I've managed to get some visual bars and did some experimenting with them on my CodePen and I'm pretty happy with it, but I'm also intrigued about what else can be done. Will definitely be exploring some more.
Amazing!! I want more!!
Your videos are awesome man !!
Make more like this 💯💯🔥🔥
Hi Arnav, thank you for letting me know, I will make more :D
Just wanna say : Thank you so much sir..
Liked this video after one second when I saw the preview of the visualiser, my audio visualisers are always so boring. Yours is super fancy.
Thanks Walter, I'm sure soon you will be able to make nice visualizers as well. I'm working on a follow up to this with more complex audio animations
How do I generate audio signal wave before audio is played like how SoundCloud does it?
I think sound cloud generates a wave based on volume levels right? Volume levels are easy to capture, the entire code that would do that would need it's own tutorial, I might do it eventually
@@Frankslaboratory oh great that would be very helpful 🙏👌
this is absolutely wonderful and very helpful
Thank you so much! this was awesome.
I love what you're doing.
Behnam! Nice to meet you, thank you for such a nice feedback ❤
hello "love you man" realy like your explain style
This video is everything. Thank You!!💯
I'd love to see a github repo set up for this where you can add some documentation. Specifically, a list of settings you have used to generate a specific waveform
TNX for this video :) really appreciated :)
I'm here to help :)
Looking forward to this 🤓 Always been a dream of mine to make an audio visualizer 😁😁😁😁
Its not difficult. I tried to explain all the bits for beginners. Might also do advanced version later :)
@@Frankslaboratory managed to find 45 mins in the everyday life 😎 looking good so far
Thank you so much for these amazing videos. Each one is so inspiring!
Really? That's so nice to hear, thank you for letting me know you found some value in my video ❤
cool series. a question. is it possible to use a stream of data for example a link that streams music (like a radio station) as the src?
I had them same question and I can't seem to figure it out. I have the .io link to the radio stations stream but can't figure out how to get it implemented the closest I've come to figuring it out is getting the audio for the visualizer through the microphone on the computer
Only 10 minutes in but really enjoying how you break everything down. I'm a Digital Producer trying out different languages and this tutorial is great.
Great endeavor but remember should be ready for under the hood upgrade or work on building solid sound system and speaker driver separate but compatible with microcontroller that generate pattern consistently over various terrain with the same pattern that need Bose canceling technology
Awesome Amazing!! Best contents ever ❤♥
Thank you Bryan ❤😊
Wow amazing ❤️❤️❤️❤️❤️
Hi, glad you liked it ❤
Great content! Keep it up man.
Thanks Petr. I will try :)
Like and comment so UA-cam recommend other viewers this awesome video and channel.
Thanks, that's really cool and what I wanted to know!
Glad you found some value Alexander
Incredible!
Thanks sir for explaining from the basic 😍