r/learnjavascript • u/frank0117 • Mar 13 '21

Vanilla JavaScript audio visualizers for beginners (code included)

312 Upvotes

98% Upvoted

7 comments sorted by

12

u/frank0117 Mar 13 '21

I made many different versions of this projects, more examples in the video

Step by step tutorial for beginners: https://youtu.be/VXWvfrmpapI

Vanilla JavaScript Audio Visualizer 1 https://codepen.io/franksLaboratory/pen/wvoNqdv

Vanilla JavaScript Audio Visualizer 2 https://codepen.io/franksLaboratory/pen/XWNOaee

Vanilla JavaScript Audio Visualizer 3 https://codepen.io/franksLaboratory/pen/ExNrvEQ

1

u/web586f41 Mar 14 '21

I liked your work a lot.

5

u/anti-gif-bot Mar 13 '21

mp4 link

This mp4 version is 95.81% smaller than the gif (284.63 KB vs 6.63 MB).

Beep, I'm a bot. FAQ | author | source | v1.1.2

1

u/StoneCypher Mar 14 '21

It's neat looking. I would recommend more easing and less red

2

u/frank0117 Mar 14 '21

I built many different versions. I wanted to make it into a beginner tutorial on my YT so didnt include any easing algorithm at all. I will make advance version where I attach sound to particle system. That will have easing

1

u/lindymad Mar 14 '21

Which browsers do these work on?

2

u/frank0117 Mar 14 '21

It works on all modern browsers as far as I can tell