JavaScript ? Audio ? Visualizers

HTML canvas offers two ways to draw smooth elastic curves, what's the difference? 'quadraticCurveTo' is used to draw ONE curve and 'bezierCurveTo' can draw TWO curves, let's use it in a project! We will draw animated audio visualizers with JavaScript and learn about CSS3 animations, HTML5 canvas and Web Audio API in the process. Maybe I played too much Pokémon RPGs back in the day, sorry :D

Longer DEEP DIVE version of this tutorial available here:
? Audio Magic with JavaScript https://youtu.be/qNEb9of714U

⭐️TABLE OF CONTENT ⭐️
00:00 quadraticCurveTo and bezierCurveTo explained
00:33 Vanilla JavaScript audio visualizers
01:27 SVG images in HTML
02:40 CSS styles, stroke-dasharray, stroke-dashoffset
03:43 HTML canvas setup with JavaScript
04:21 ES6 classes
04:54 Animation loop
06:02 How to use Web Audio API to capture microphone audio
11:09 Connecting audio data and canvas animations
14:15 'Snail shell' circular audio visualizer
24:24 Seahorse visualizer with bezierCurveTo

? SVG code: ? (feel free to use these for your own art)
SNAIL http://frankslaboratory.co.uk/downloads/svg/snail.svg
SEAHORSE http://frankslaboratory.co.uk/downloads/svg/seahorse.svg
BAT http://frankslaboratory.co.uk/downloads/svg/bat.svg
FOX http://frankslaboratory.co.uk/downloads/svg/fox.svg
ANGLERFISH http://frankslaboratory.co.uk/downloads/svg/anglerfish.svg
OWL http://frankslaboratory.co.uk/downloads/svg/owl.svg
DEER http://frankslaboratory.co.uk/downloads/svg/deer.svg
DINOSAUR http://frankslaboratory.co.uk/downloads/svg/dinosaur.svg
MOTH http://frankslaboratory.co.uk/downloads/svg/moth.svg
CHAMELEON http://frankslaboratory.co.uk/downloads/svg/chameleon.svg

❤ Related Audio Tutorials (Web Audio API) ❤
? JavaScript sound complete course (from basics to visualizers) https://youtu.be/VXWvfrmpapI
? 10 audio visualizer experiments https://youtu.be/f0dwg99EVfo
? Audio Magic with JavaScript https://youtu.be/qNEb9of714U
? Talking Pumpkin Audio Visualizer with Radu https://youtu.be/plnhFAHEfrM
? Melody Maker app with Radu https://youtu.be/JNtuLw2fybo

Recommended Udemy courses (get solid understanding of the basics and then use it to build projects):
☕ Object-oriented Programming in JavaScript (Mosh Hamedani) https://bit.ly/3f4Otu0
☕ JavaScript Basics for Beginners (Mosh Hamedani) https://bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) https://bit.ly/3fWJgWk
☕ JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn
☕ Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
☕ JavaScript: The Advanced Concepts (2021) https://bit.ly/2Uk6Wyk
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) https://bit.ly/37Hlxqq
☕ The Complete JavaScript Course 2021: From Zero to Expert! https://bit.ly/3fXGwaZ
☕ 20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid https://bit.ly/3tu9ghD
☕ Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT

Free good quality courses:
Object-oriented Programming in JavaScript: Made Super Simple | Mosh https://youtu.be/PFmuCDHHpwk
JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour https://youtu.be/W6NZfCO5SIk
JavaScript: Understanding the Weird Parts - The First 3.5 Hours https://youtu.be/Bv_5Zv5c-Ts

? Music: (YouTube audio library) Dub Hub - Jimmy Fontanez Media Right Productions
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory