Audio-Reactive Visuals

When to use this

• You are building a music visualizer (waveform, spectrum, radial display).
• You want background visuals that pulse, shift, or morph in response to audio playback.
• You need to extract frequency data (bass, mids, highs) to drive shader uniforms or animation parameters.
• The design calls for beat detection to trigger discrete visual events.
• Do NOT use this for static audio players or simple play/pause UI -- this is about visuals driven by audio analysis.

Mental model

The Web Audio API's AnalyserNode does the heavy lifting. It sits in the audio graph between the source and the destination, performing a Fast Fourier Transform (FFT) every frame.

getByteFrequencyData(array) fills a Uint8Array with the magnitude of each frequency bin, 0-255. The array length is fftSize / 2 (called frequencyBinCount). With the default fftSize of 2048, you get 1024 bins spanning 0 Hz to half the sample rate (typically 24kHz).

The bins are linearly spaced: bin 0 is ~0-23Hz, bin 1 is ~23-46Hz, etc. (at 48kHz sample rate). This means bass (20-250Hz) lives in roughly bins 0-10, and the vast majority of bins cover frequencies above 1kHz that humans barely perceive as distinct. For visualization, you almost always want to compress or re-map the bins logarithmically.

getByteTimeDomainData(array) gives the raw waveform (PCM samples), useful for oscilloscope-style displays.

smoothingTimeConstant (0-1) controls how much each frame's FFT is averaged with the previous frame. At 0, the data jumps wildly per frame. At 0.8 (default), it is very smooth but laggy. For beat detection, use 0.3-0.5. For ambient response, 0.8-0.9.