How a music visualizer works
Every visualizer, from Winamp’s MilkDrop to a TikTok template, does the same three things. First it samples the audio and runs a Fourier transform, which turns a slice of sound into a frequency spectrum: how much energy there is at each pitch, from sub-bass to the top of the hi-hats. Second it reduces that spectrum to a few numbers per frame (typically bass, mid, and treble levels) and watches those levels for sudden jumps, which is how it detects beats. Third it maps the numbers onto the picture: bass drives the zoom, a detected beat triggers a rotation or a flash, treble adds fine detail.
In a browser the analysis step is the Web Audio API’s AnalyserNode, which returns the spectrum of whatever is playing every frame. Groovalizer reads it around 60 times a second and hands the bands to the projectM engine, where each preset decides for itself what to do with them.
The difference between a good visualizer and a boring one is almost entirely in step three. Bars are the simplest mapping; a generative preset is a small program with dozens of parameters riding on the same three numbers.
The three kinds of music visualizer
Spectrum and waveform visualizers
Draw the frequency spectrum as bars, or the waveform as a line, directly from the audio analysis.
- Examples
- SoundTools, musicvid.org, the classic Windows Media Player bars.
- Strength
- Honest and legible: you can see the kick and the hi-hats.
- Limit
- Everyone recognises the look, and there are only so many ways to draw a bar chart.
Template visualizers
Arrange reactive widgets (spectrum rings, progress bars, particles) around your cover art and logo, usually rendered in the cloud.
- Examples
- Specterr, SongRender, Renderforest, Kapwing’s audio visualizer tool.
- Strength
- Branded output fast, lyric-video features, familiar YouTube channel aesthetic.
- Limit
- Per-video pricing, watermarked free tiers, and templates shared by every other subscriber.
Generative visualizers
Run a program (equations and shaders) that produces a new image every frame, with the audio bands feeding directly into the maths. MilkDrop and its open-source successor projectM are the reference design.
- Examples
- Groovalizer (projectM in WebAssembly, with video export), Butterchurn (WebGL playback), Winamp’s MilkDrop.
- Strength
- Thousands of distinct looks; visuals that feel like the song rather than sit on top of it.
- Limit
- Less literal than bars: you do not get a readable spectrum, you get a scene.
What people use music visualizers for
- Publishing a track on YouTube. A full-length visualizer video is the standard way to put audio on a video platform without shooting anything.
- Short-form promotion. A 15–90 second vertical clip of the hook for TikTok, Reels, or Shorts.
- Live shows and parties. Visuals on a projector that react to the room’s sound through a microphone, the VJ tradition MilkDrop started.
- Listening. The original use: something worth looking at while music plays.
A short history
The genre’s defining work is MilkDrop, written by Ryan Geiss for Winamp in the early 2000s: beat-reactive equations rendering fractals, waves, and warping geometry, with a preset format (.milk) that a community spent two decades writing art in. projectM reimplemented it as open source so it could outlive Winamp; Butterchurn ported it to WebGL so it could run in a browser tab.
Groovalizer runs projectM compiled to WebAssembly, which is why it ships thousands of presets rather than a dozen templates, and adds the thing no MilkDrop player ever had, a button that renders your track to MP4.
If none of those presets is the look you want, you can describe it in plain words and have the AI write the preset.