JavaScript 🎵 Audio 🎵 Visualizers

Опубликовано: 23 Октябрь 2024
на канале: Franks laboratory

63,103

1.6k

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    • Animate Voice & Music with JavaScript

⭐️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/downloa...
SEAHORSE http://frankslaboratory.co.uk/downloa...
BAT http://frankslaboratory.co.uk/downloa...
FOX http://frankslaboratory.co.uk/downloa...
ANGLERFISH http://frankslaboratory.co.uk/downloa...
OWL http://frankslaboratory.co.uk/downloa...
DEER http://frankslaboratory.co.uk/downloa...
DINOSAUR http://frankslaboratory.co.uk/downloa...
MOTH http://frankslaboratory.co.uk/downloa...
CHAMELEON http://frankslaboratory.co.uk/downloa...

❤ Related Audio Tutorials (Web Audio API) ❤
🎵 JavaScript sound complete course (from basics to visualizers)    • JavaScript Audio CRASH COURSE For Beg...
🎵 10 audio visualizer experiments    • JavaScript AUDIO VISUALIZERS tutorial...
🎵 Audio Magic with JavaScript    • Animate Voice & Music with JavaScript
🎵 Talking Pumpkin Audio Visualizer with Radu    • Vanilla JavaScript Character Animation
🎵 Melody Maker app with Radu    • Melody Maker app using vanilla JavaSc...

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    • Object-oriented Programming in JavaSc...
JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour    • JavaScript Tutorial for Beginners: Le...
JavaScript: Understanding the Weird Parts - The First 3.5 Hours    • JavaScript: Understanding the Weird P...

🎵 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