Web Audio API: build your mental model for visualizers

The pipeline in one breath

Microphone or file → AudioContext → AnalyserNode → byte arrays → your draw loop. Everything else is polish. If you understand that chain, every visualizer — including Beat Visualizer — becomes less mysterious.

Frequency vs time domain

• Frequency data answers: which bands are loud right now?
• Time-domain data answers: what does the waveform look like?

Most fun visuals mix both: spectrum for color motion, waveform for organic wobble.

FFT size and smoothing

Larger fftSize → finer frequency bins, slightly slower reaction. Higher smoothing → calmer motion but softer transients. There is no universal best; electronic genres often tolerate lower smoothing, acoustic sets sometimes want more.

Where Beat Visualizer goes further

Beyond raw bins, the engine tracks energy, spectral flux, and bass-relative statistics so beat and drop detectors can drive mode changes — that is how “smart sync” feels musical instead of random.

Try it

Open the online audio visualizer tool page and experiment in the live app with sync toggles while you listen.