Audio Visualizer Overlay for OBS: 16-Band Spectrum Bars
An audio visualizer overlay turns your stream's sound into moving spectrum bars. With Reactor Studio you do not download a fixed widget — you turn your own artwork into the visualizer: mark the columns in your image, let an AI write the shader, and export a single transparent HTML file for OBS. The underlying analysis measures 16 logarithmically spaced frequency bands (about 30 Hz to 16 kHz) with automatic gain, a noise gate, and per-band peak hold — the ingredients that make an equalizer look alive instead of jittery.
Why the analysis details matter
Most quick visualizer widgets split the spectrum linearly. That looks wrong, because music does not live in linear frequency space: almost everything interesting happens below 4 kHz, so linear bands leave most bars dead. A proper visualizer needs:
- Logarithmic band spacing — each band covers a musically equal slice, so all 16 bars participate.
- Peak hold — a marker rides each bar's recent maximum and falls slowly. This is the detail that makes an EQ read as "real".
- Automatic gain — quiet lo-fi beats and loud drops both fill the display meaningfully.
- A noise gate — silence stays silence, instead of room noise flickering at the bottom.
Reactor Studio's audio engine does all four, and exposes them to effects as simple shader inputs.
Build it
1. Start from artwork with columns
Use an image that contains the bars you want to animate — 16 columns drawn in your own style, or any artwork with repeating vertical elements. Add it to a new project in Reactor Studio and mark the columns as a zone.
2. Use the EQ Bars starter or describe your own
The EQ Bars starter effect renders a 16-band equalizer with peak marks and a calm idle animation when no audio is active. Or describe your own look in plain language — "fill these 16 columns from the bottom based on the audio spectrum, with a thin peak marker above each" — and the AI generates the shader for your zones.
3. Preview with real audio
Enable audio and pick your input device. Play music, watch all 16 bands work across the spectrum, and tune the sliders — colors, glow, fall speed — until it matches your scene. No microphone at hand? The built-in simulator produces plausible 16-band motion so you can design anywhere.
4. Export for OBS
Export the scene as an OBS Overlay (HTML) — one self-contained file with a transparent background and no visible controls. Add it to OBS as a browser source (local file, 1920 × 1080). The full OBS setup, including how to feed music in through a virtual audio cable, is covered step by step in How to Add an Audio-Reactive Overlay to OBS.
Beyond bars
The same audio inputs drive any effect, not just equalizers: a logo that pulses with the bass, a border that glows on the beat, particles that sparkle with the highs. If you can describe it, the AI can usually shade it — and everything stays anchored to your own artwork.
Frequently asked questions
How many frequency bands does the visualizer have?
The analysis engine measures 16 logarithmically spaced bands from roughly 30 Hz to 16 kHz, plus a peak-hold value per band. If your artwork has fewer columns, bands can be aggregated — eight columns simply combine band pairs.
Why do the bars stay still when it is quiet?
By design. A noise gate keeps room noise and silence from being amplified into dancing bars, and automatic gain control only normalizes actual signal. Silence looks calm; music fills the spectrum.
Can I use my own artwork for the bars?
Yes — that is the point. Mark the columns in your own image as zones and the AI turns exactly those shapes into the equalizer. Your overlay keeps your art style instead of looking like a stock widget.
Does this work in streaming tools other than OBS?
The export is a standard HTML browser source, so any tool that can show a browser or HTML source can display it — including Streamlabs Desktop.
Design your own reactive overlay — right in the browser, no install.
Open Reactor Studio