I always loved the music visualizers in WinAmp, so I wanted to make my own.

What it does

Creates a simple 2D particle system that reacts to the music.

How I built it

I modified a random particle system generator I made to take audio data as the input instead of randomly generated values. It uses canvas to draw the shapes and AnalyserNode to get the frequency data from the audio signal. This data is used to modified the size and opacity of each shape so they react to the music.

Challenges I ran into

Finding a set of initial parameters that would look good for any music being played. I played around a lot with different values until the particle system looked pretty. When I first added the audio signal data, the shapes were very jittery and unpleasant to look at. I added a natural decay to the size and opacity of each shape, so these sudden changes would be a lot smoother and the shapes would seem to pulse with the music.

What I learned

This was one of my first major js projects. I learned a lot about how to use the WebAudio API to analyze audio signals and HTML canvas to draw whatever I want. I also learned how to spell analyzer with an s because mozilla can't spell properly, jk.

What's next for Staccato

I'm working on adding microphone support, so you could use the visualizer in realtime with your mic.

Built With

Share this project: