Uploaded November 2021 | Updated September 2026, 2 weeks ago

---

Let's unlock the secrets of JavaScript audio together. Web Audio API offers a powerful set of tools we can use to create audio and animation magic directly in the browser. In this tutorial for beginners we will use audio data coming from a microphone to create a set of creative animations with vanilla JavaScript, HTML5 & CSS3. Have fun ❤

🎩 Part 2 with Radu - Talking Pumpkin youtu.be/plnhFAHEfrM
🎩 Animated creatures 🎵 AUDIO 🎵 visualizers youtu.be/Ub70TitG6_k

⭐️TABLE OF CONTENT ⭐️
00:00 Creative audio visualiser examples
01:34 HTML and CSS setup
03:03 Connecting JavaScript, HTML canvas setup
04:15 Audio bar class and animation loop
11:21 How to get raw microphone audio data
13:45 How to bring web audio API into a project
(How to use web audio API to convert raw microphone stream data into audio nodes and connect them to audio analyser node)
20:49 How to get audio samples as an array of values
24:39 How to get average volume as a single value
27:23 Creating an array of audio bar objects
29:20 Drawing static audio bars
30:54 Rainbow colours with HSL colour declaration
33:13 Connecting microphone audio to animated bars
(Creating simple bar visualiser )
37:58 How to create a circular visualisers
41:50 Easing animations for smooth movement
42:42 Spiral audio visualiser experiments
46:08 Scaling based on volume
47:31 Adding rotation based on volume

❤ Related Links (vanilla JS & Web Audio API) ❤
🎩 JavaScript sound crash course (+ visualisers) youtu.be/VXWvfrmpapI
🎩 10 audio visualiser experiments youtu.be/f0dwg99EVfo
🎩 Melody Maker app with Radu youtu.be/JNtuLw2fybo

🔥 I really like these FRONT END WEB DEVELOPMENT courses on Udemy 🔥
☕ JavaScript: The Advanced Concepts (2021) bit.ly/2Uk6Wyk
Learn modern advanced JavaScript practices and be in the top 10% of JavaScript developers. (Andrei Neagoie)
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) bit.ly/37Hlxqq
Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource in 2021. (Maximilian Schwarzmuller)
☕ The Complete JavaScript Course 2021: From Zero to Expert! bit.ly/3fXGwaZ
The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one! (Jonas Schmedtmann)
☕ 20 Web Projects With Vanilla JavaScript bit.ly/3anlCQR
Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries, Brad Traversy)
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) bit.ly/3fWJgWk

The Web Audio API is a powerful and versatile system for controlling audio on the web. It has a set of built in methods and properties that allow us to generate, play and analyse sounds directly in the browser. Today we will show you how to use HTML CSS and JavaScript to animate your voice and music. Lets do some audio magic together and learn about front end web development in the process, this tutorial is for beginners so feel free to code along.

🎮 HTML5 canvas and JavaScript GAME tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu

Check out this playlist for more front end web development and creative coding:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh

Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory

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