AUDIO VISUALIZER
I built a browser-based audio visualizer that reacts in real time to user-loaded tracks.
It uses JavaScript, the Web Audio API, and custom attack/decay shaping to make transients stand out visually.
Live link: https://ejw817.github.io/audio-visualizer/
Source code: https://github.com/EJW817/audio-visualizer
Demo Video
Project Description
Real-Time Audio Visualizer (JavaScript · Web Audio API · Canvas)
I built a browser-based audio visualizer that reacts in real time to any track the user loads.
The system analyzes incoming audio using the Web Audio API, maps the spectrum into 48 perceptual frequency bands, and applies custom gamma shaping to enhance clarity in the high end.
To make transients visually striking, I wrote a fast-attack / smooth-decay response model that exaggerates sudden increases in amplitude while keeping the rest of the movement clean and stable. I also normalized all animation with dt-based timing, so the motion stays consistent across different refresh rates and devices.
The visualizer provides two modes:
Header Bars — a responsive bar graph with soft glows and rounded-rectangle geometry
Spiral + Heartbeat — a rotating particle spiral with depth layers, a halo core, and a center heartbeat line that reacts to amplitude
Everything renders in real time using HTML5 Canvas without any external libraries.