JavaScript Audio CRASH COURSE For Beginners

  Рет қаралды 92,323

Franks laboratory

Franks laboratory

Күн бұрын

Пікірлер: 466
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
If you want more vanilla JavaScript audio effects check out Radu's Melody Maker app tutorial kzbin.info/www/bejne/gH_Xpn-tZ8usmNE. Have you used Web Audio API before or is this your first time? Click the LIKE please :D
@AleksPopovic
@AleksPopovic 3 жыл бұрын
Another awesome project from the Frank's laboratory. :) I love the creative approach you have in your videos. Very inspiring!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
@@AleksPopovic Hi Aleks, thank you, very kind of you to say
@johnadriandodge
@johnadriandodge 3 жыл бұрын
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.
@mahbubhussain9998
@mahbubhussain9998 3 жыл бұрын
Please record your voice at coding time ...
@codingvids844
@codingvids844 2 жыл бұрын
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, KZbin - 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.
@HardWiredOnline
@HardWiredOnline 2 жыл бұрын
This was exactly what I was looking for. I wanted to learn javascript, but also wanted a custom audio visualiser. Thank you very much.
@VrisToK
@VrisToK 3 жыл бұрын
Nice thank you I need this!!! 🙏🏻🙏🏻🙏🏻
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
I hope it helps, thanks for letting me know
@quickcodingtuts
@quickcodingtuts Жыл бұрын
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!
@JohnBartmannMusic
@JohnBartmannMusic 2 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 2 жыл бұрын
Hi John, thank you for this feedback, I will try to remember to do that more often when recording tutorials
@JohnBartmannMusic
@JohnBartmannMusic 2 жыл бұрын
​@@Frankslaboratory many ppl watch at 1.5x, so a 6sec pause is actually only 4 secs. same goes for podcasts - sloooooow down everyone!
@JamieShortz
@JamieShortz Ай бұрын
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
@SquierMarr
@SquierMarr Жыл бұрын
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!
@Frankslaboratory
@Frankslaboratory Жыл бұрын
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
@g01dHaCkEr
@g01dHaCkEr 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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.
@g01dHaCkEr
@g01dHaCkEr 3 жыл бұрын
@@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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
@@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
@computerscience1152
@computerscience1152 3 жыл бұрын
You are a Javascript ARTIST 🎨 🎶🎶🎶👍👍👍👍
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you, very kind of you to say ❤
@meleeboy7482
@meleeboy7482 3 жыл бұрын
Dude i saw your vid in my feed and just knew that i had to watch it immediately. Keep going this is amazing
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 🎶
@Radu
@Radu 3 жыл бұрын
I think it's great that you share your process on how you come up with these effects!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you :)
@vintagehome2822
@vintagehome2822 2 жыл бұрын
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!
@_xAdioS_x
@_xAdioS_x 2 жыл бұрын
yooo I'm studying in coding bootcam, and this video inspired me to create my solo project its real magic ty!
@haythamkenway1561
@haythamkenway1561 3 жыл бұрын
man you are underrated , you deserve more. thanks for this joyful tutorial
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Haytham, thank you, very kind to say that
@johnadriandodge
@johnadriandodge 3 жыл бұрын
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!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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.
@johnadriandodge
@johnadriandodge 3 жыл бұрын
@@Frankslaboratory I thought it was quite trippy Frank. Quite cryptographic!
@johnadriandodge
@johnadriandodge 3 жыл бұрын
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?
@johnadriandodge
@johnadriandodge 3 жыл бұрын
I adore your programmatic artwork!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
@@johnadriandodge It was indeed. I also use base64 string for advanced pixel effects in some other videos it's cool.
@herbert-kenumera960
@herbert-kenumera960 3 жыл бұрын
God this is so cool. I remember when I wanted to make an online soundboard, but ran into constant issues. I love this channel.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 :)
@itsfzt
@itsfzt 3 жыл бұрын
Man, I don't have words! But thanks a lot! You giving so much to the community!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi, thank you for such a nice feedback ❤ I hope people find some value in this video
@jerganhector9733
@jerganhector9733 3 жыл бұрын
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
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Jergan, nice to meet you. Some techniques don't have many tutorials online yet, I'm trying to contribute a little bit
@reynaldorobles
@reynaldorobles 3 жыл бұрын
I just started following your youTube, I love how you make things so simple.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi. Nice to meet you. Thank you ❤
@elliethor8092
@elliethor8092 2 жыл бұрын
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.🙏
@gregorschwezow8883
@gregorschwezow8883 3 жыл бұрын
First time I had fun while doing research for projects for university in ages, thanks a lot for that man :D
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Gregor, are you doing audio project for university? Thank you for such a nice feedback, it's nice to see.
@gregorschwezow8883
@gregorschwezow8883 3 жыл бұрын
@@Frankslaboratory We need to develop a music player with js, so we needed some visualization of music :)
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
@@gregorschwezow8883 Great project idea, I would enjoy working on something like that. My school projects were boring haha.
@damienbriggs879
@damienbriggs879 3 жыл бұрын
This series of videos is stunning. I'm completely hooked.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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
@andrewcuster6498
@andrewcuster6498 3 жыл бұрын
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.
@username-jm2bn
@username-jm2bn Жыл бұрын
i finished the project it was super insightful thanks for making this video!
@Frankslaboratory
@Frankslaboratory Жыл бұрын
nice, congratulations on completing the project
@q_13t14
@q_13t14 10 ай бұрын
This tutorial is just gorgeous! Thank you so much for such a detailed and explained example!
@Frankslaboratory
@Frankslaboratory 9 ай бұрын
Thank you, glad to hear that
@johnadriandodge
@johnadriandodge 3 жыл бұрын
Never know what one will discover with slight adjustments to the numbers. Amazing!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi John, yes, experimenting with values at the end is the best part :D
@johnadriandodge
@johnadriandodge 3 жыл бұрын
​@@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!
@johnadriandodge
@johnadriandodge 3 жыл бұрын
golly gee Frank, one more. www.product66.com/websandbox/aboriginal/audiospectrum.html
@harshaan8984
@harshaan8984 Жыл бұрын
A good and efficient lesson. Very good flow, starting with the basics while foreshadowing to advanced stuff. Thank you!
@SuperRookie
@SuperRookie Жыл бұрын
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.
@matiassomoza8207
@matiassomoza8207 2 жыл бұрын
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!!!!
@rudyls
@rudyls 2 жыл бұрын
honestly, I'm blown away
@Frankslaboratory
@Frankslaboratory 2 жыл бұрын
Glad you like :)
@hampusolsen8241
@hampusolsen8241 3 жыл бұрын
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!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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
@unknown-bx8my
@unknown-bx8my 3 жыл бұрын
Awesome, this is very important. Audio + canvas = 🔥❤
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Its very useful to know how to control sounds. I came up with many creative ideas while working on this. Future tutorials maybe 🎶🎵
@LinkingWorlds
@LinkingWorlds Жыл бұрын
I hope you know how much you are a super teacher ! THX a lot !
@Frankslaboratory
@Frankslaboratory Жыл бұрын
Hi Ricky, thank you, very kind of you to say
@Goloso333
@Goloso333 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 ❤
@dappinstitute
@dappinstitute 2 жыл бұрын
Awesome brother. We love the music javascript videos!
@user-ts2ww6to2k
@user-ts2ww6to2k 3 жыл бұрын
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!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Zein, nice to meet you. Creative coding and front end web dev goes well together, good luck with your studies
@tarun7617
@tarun7617 3 жыл бұрын
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
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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?
@tarun7617
@tarun7617 3 жыл бұрын
@@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
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
@@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
@simonfinkenstaedt5124
@simonfinkenstaedt5124 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 :)
@Zudomon
@Zudomon Жыл бұрын
Thank you very much for your tutorial! I used it to connect some frequencies to bones to let my character move by music.
@jeesjans9676
@jeesjans9676 3 жыл бұрын
Very nice video once again, will code along tomorrow
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Jees. I hope you like it and have fun coding
@TheMisieq93
@TheMisieq93 3 жыл бұрын
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
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you Gerhok. Very kind to say that 😊
@deemo16
@deemo16 3 жыл бұрын
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.
@vietvohoang459
@vietvohoang459 3 жыл бұрын
Thank you for your detailed tutorial, I got many values from this!
@dappinstitute
@dappinstitute 3 жыл бұрын
Frank is the best! Thanks for the education
@MicahBratt
@MicahBratt 3 жыл бұрын
Good stuff man thanks for explaining this stuff in such a simple way. You're a really good teacher!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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
@natalia5823
@natalia5823 3 жыл бұрын
Hello, So many fun and pleasure time to spend with you and making some interesting, fantastic .!AMAZING!. things !!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Natalia. Glad you had fun with my video. Thank you for letting me know ❤
@AntonioBrandao
@AntonioBrandao 3 жыл бұрын
Hi! Great video, I will be learning this one :D thank you!!!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
I hope you like it, I also made part 2 where I create 10 different visualizers
@AntonioBrandao
@AntonioBrandao 3 жыл бұрын
@@Frankslaboratory you are a machine!! 👌 respect!
@WalterKimaro
@WalterKimaro 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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
@sabrinapyles563
@sabrinapyles563 3 жыл бұрын
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
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 :)
@piersonlippard2911
@piersonlippard2911 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 :)
@piersonlippard2911
@piersonlippard2911 3 жыл бұрын
@@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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
@@piersonlippard2911 Good to hear, thank you, happy Easter Pierson :)
@ashiinsane90
@ashiinsane90 3 жыл бұрын
First video i see of your channel instantly subbed
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Nice to meet you. Good to have you here Ash
@josephcieplak8920
@josephcieplak8920 3 жыл бұрын
Your videos are constantly enriching my knowledge on web programming. thank you!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Joseph. Very happy to hear that thank you for letting me know ❤
@RockAristote
@RockAristote 2 жыл бұрын
Love you dude. Thanks for your great tutorials!
@PheonixPhoenix101
@PheonixPhoenix101 2 жыл бұрын
Great Video!!! I'm working on an app that brings in audio encoded in base64 using ajax. This has helped me greatly. Thank you!!!
@Frankslaboratory
@Frankslaboratory 2 жыл бұрын
Interesting project idea. Glad you found some value !
@PheonixPhoenix101
@PheonixPhoenix101 2 жыл бұрын
@@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...
@alisaydam5548
@alisaydam5548 2 жыл бұрын
Your tutorials are next level. I am learning so much with you. Thank you for all your work. It is awesome.
@u2bMusicBeauty
@u2bMusicBeauty 3 жыл бұрын
Beautiful and Powerful that I've been searched it for a long time ago ,thanks so much.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you. Very kind of you to say. I'm glad you like it :)
@PrakashPrakash-sn3do
@PrakashPrakash-sn3do 3 жыл бұрын
First time on youtube awesome knowledge thank you so much
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Prakash, I'm glad you found some value in the video
@mallikarjunmg6695
@mallikarjunmg6695 3 жыл бұрын
I'm doing a project like this one....thanks for the video....keep going 🔥
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Good luck with your project
@jaxthedisintegrator8096
@jaxthedisintegrator8096 Жыл бұрын
Are there ways to play with the bars radius ? 🤩. Superb tutorial, thanks for sharing knowledge 👍👍👍
@comoyun
@comoyun 3 жыл бұрын
WOOOOOOWWW you are my hero bro!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi, thank you, I guess you like this one, good to know :)
@carltone
@carltone 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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
@RayMerrell68
@RayMerrell68 Жыл бұрын
@34:32 Holding down the shift key and pressing 'end' will highlight the entire line. Then just ctrl-x and paste wherever.
@sojuthomas7727
@sojuthomas7727 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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
@delahogue
@delahogue 3 жыл бұрын
Looking forward to this 🤓 Always been a dream of mine to make an audio visualizer 😁😁😁😁
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Its not difficult. I tried to explain all the bits for beginners. Might also do advanced version later :)
@delahogue
@delahogue 3 жыл бұрын
@@Frankslaboratory managed to find 45 mins in the everyday life 😎 looking good so far
@alliedeena1141
@alliedeena1141 3 жыл бұрын
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...
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Allie, that's a great idea, I would like to do something with voice morphing, hmm, putting it on my list
@alliedeena1141
@alliedeena1141 3 жыл бұрын
@@Frankslaboratory Dear Sir, thank u so much...
@zalodias123
@zalodias123 3 жыл бұрын
Hey Frank! Amazing tutorial as always. Audio working fine on Chrome without encoding to base64!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 :)
@mute888
@mute888 3 жыл бұрын
Love this video! Would very much enjoy to see this with particle system!
@kingbril6713
@kingbril6713 3 жыл бұрын
This is such an enjoyable video! I loved your presentational style and clarity of testing each line you write. Cheers!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you for such a nice feedback. I will try to do more of that
@suryapratimpaul
@suryapratimpaul 3 жыл бұрын
Thanks Frank for the wonderful tutorial.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Suryapratim, thank you for letting me know that you liked it
@suryapratimpaul
@suryapratimpaul 3 жыл бұрын
I've been a js developer for 2 years now but I still fear canvas and I'm overcoming it slowly, thanks to you and some other.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
@@suryapratimpaul canvas is powerful and can be intimidating at first, I hope you find some content to ease you in, the most important thing is practicing, so just build projects and learn and it will make sense eventually. it took me a while to learn it as well.
@araujohs
@araujohs 8 ай бұрын
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.
@arnavbiswas6095
@arnavbiswas6095 3 жыл бұрын
Your videos are awesome man !! Make more like this 💯💯🔥🔥
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Arnav, thank you for letting me know, I will make more :D
@craftymunz7425
@craftymunz7425 Жыл бұрын
this is absolutely wonderful and very helpful
@coltonaallen
@coltonaallen 3 жыл бұрын
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.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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 :)
@coltonaallen
@coltonaallen 3 жыл бұрын
@@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
@Frankslaboratory 3 жыл бұрын
@@coltonaallen Thanks Arthur, you always have something positive to say, I always enjoy chatting with you
@coltonaallen
@coltonaallen 3 жыл бұрын
@@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.
@adedoyinemmanuel7802
@adedoyinemmanuel7802 3 жыл бұрын
Thanks man you are full of content can't wait for more like this 😁😁
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you Ade, very kind of you
@ozosenwald7431
@ozosenwald7431 3 жыл бұрын
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!!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
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
@davidgray4704
@davidgray4704 2 жыл бұрын
Very useful and datiled tutorial! I learnt a lot from it, thank you so much!
@behnamazizi9470
@behnamazizi9470 3 жыл бұрын
Thank you so much! this was awesome. I love what you're doing.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Behnam! Nice to meet you, thank you for such a nice feedback ❤
@kwreck0022
@kwreck0022 2 жыл бұрын
This video is everything. Thank You!!💯
@ganjamangaaiaaai9396
@ganjamangaaiaaai9396 3 жыл бұрын
TNX for this video :) really appreciated :)
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
I'm here to help :)
@YashDEVELOPER12
@YashDEVELOPER12 3 жыл бұрын
Just wanna say : Thank you so much sir..
@solkyske
@solkyske Жыл бұрын
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
@computerscience1152
@computerscience1152 3 жыл бұрын
Awesome tutorial
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Glad you like it :)
@piersonlippard2911
@piersonlippard2911 3 жыл бұрын
Hey there Frank, this is an awesome tutorial. ;-)
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Pierson, thank you, hope you're well, finally my video is done and I can go out enjoy the nice UK weather haha
@piersonlippard2911
@piersonlippard2911 3 жыл бұрын
@@Frankslaboratory ...hehehehe....enjoy the fresh air Frank, you'd better be quick cos the sun has finally come out. ;-)
@patakhte6367
@patakhte6367 3 жыл бұрын
so thanks. very useful and beautiful. thanks so much
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you. I'm making a follow up course now. Will release it next week
@DantesSagan
@DantesSagan 2 жыл бұрын
Thanks, that's really cool and what I wanted to know!
@Frankslaboratory
@Frankslaboratory 2 жыл бұрын
Glad you found some value Alexander
@Bryan-ut3fl
@Bryan-ut3fl 3 жыл бұрын
Awesome Amazing!! Best contents ever ❤♥
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Thank you Bryan ❤😊
@EricPham-gr8pg
@EricPham-gr8pg Жыл бұрын
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
@chomok-bd
@chomok-bd 2 жыл бұрын
Thanks sir for explaining from the basic 😍
@canman7773
@canman7773 3 жыл бұрын
Thank you so much for these amazing videos. Each one is so inspiring!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Really? That's so nice to hear, thank you for letting me know you found some value in my video ❤
@uramon
@uramon 3 жыл бұрын
Like and comment so KZbin recommend other viewers this awesome video and channel.
@ofeenee
@ofeenee 2 жыл бұрын
Amazing!! I want more!!
@firstacc5442
@firstacc5442 3 жыл бұрын
Wow amazing ❤️❤️❤️❤️❤️
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi, glad you liked it ❤
@danielebaron104
@danielebaron104 2 жыл бұрын
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.
@trajanesco
@trajanesco 3 жыл бұрын
thanks Sir I had a lot of fun with this!
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Yay, happy to hear, thank you for letting me know :)
@HITO-nv4cg
@HITO-nv4cg 2 жыл бұрын
hello "love you man" realy like your explain style
@minzcode
@minzcode 3 жыл бұрын
This is super exciting. I want to create various effects that respond to sound.
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
You could actually make your latest L-system trees dance to music with this technique. We should have planned a collab for this :D If you start speaking on camera one day we can plan something :)
@claybowser
@claybowser 6 ай бұрын
great video man thank you for uploading
@usama_khalid
@usama_khalid 3 жыл бұрын
thanks bro. learning a lot from your channel...
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Hi Usama, happy to hear you find some value in my content, thank you for letting me know
@calebcadainoo
@calebcadainoo 2 жыл бұрын
How do I generate audio signal wave before audio is played like how SoundCloud does it?
@Frankslaboratory
@Frankslaboratory 2 жыл бұрын
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
@calebcadainoo
@calebcadainoo 2 жыл бұрын
@@Frankslaboratory oh great that would be very helpful 🙏👌
@omotolajoshua147
@omotolajoshua147 3 жыл бұрын
This is super cool now i can create something more interesting with my LoFi beats with ambleton
@Frankslaboratory
@Frankslaboratory 3 жыл бұрын
Awesome, glad you found some inspiration
Animate Voice & Music with JavaScript
55:06
Franks laboratory
Рет қаралды 34 М.
JavaScript Course for Beginners - Your First Step to Web Development
48:17
Programming with Mosh
Рет қаралды 13 МЛН
Quando eu quero Sushi (sem desperdiçar) 🍣
00:26
Los Wagners
Рет қаралды 15 МЛН
To Brawl AND BEYOND!
00:51
Brawl Stars
Рет қаралды 17 МЛН
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,6 МЛН
HTML Canvas DEEP DIVE
49:43
Franks laboratory
Рет қаралды 112 М.
How to Code (almost) Any Feature
9:48
DaFluffyPotato
Рет қаралды 718 М.
I Spent 100 Hours Inside The Pyramids!
21:43
MrBeast
Рет қаралды 16 МЛН
But what is a neural network? | Deep learning chapter 1
18:40
3Blue1Brown
Рет қаралды 18 МЛН
An introduction to Shader Art Coding
22:40
kishimisu
Рет қаралды 1 МЛН
The Easiest Way to Build Websites
10:56
Sajid
Рет қаралды 731 М.
The Magic of RISC-V Vector Processing
16:56
LaurieWired
Рет қаралды 355 М.
Learn JavaScript - Full Course for Beginners
3:26:43
freeCodeCamp.org
Рет қаралды 19 МЛН
How does a USB keyboard work?
34:15
Ben Eater
Рет қаралды 3,4 МЛН