How to Add an Audio-Reactive Overlay to OBS (Browser-Based)

To add an audio-reactive overlay to OBS, you create the overlay as a single HTML file and load it as a browser source. Reactor Studio is a browser-based editor that builds that file for you: you mark zones on your own artwork, describe the effect you want in plain language, an AI writes the WebGL shader, and you export one self-contained HTML file with a transparent background — ready for OBS. No coding, no OBS plugins.

What you need

• OBS Studio (or any streaming tool that supports browser sources)
• A modern browser (Chrome, Edge, Firefox, or Safari)
• An image to build on: your existing overlay art, a logo, or a BRB screen
• Optional, for music reactivity: a virtual audio cable such as VB-Audio Cable
• About 15 minutes

Step 1: Open the editor and add your artwork

Open Reactor Studio — the editor runs in your browser, nothing to install. Create a project and add the image you want to animate. This image is your reference canvas: everything you build is anchored to it.

Step 2: Mark the parts that should react

Draw zones over the parts of the image that should move, glow, or pulse — the bars of an equalizer, the frame of your webcam border, the letters of your BRB text. Zones give the AI precise coordinates to work with, so effects land exactly where you want them instead of somewhere on the canvas.

Step 3: Describe the effect

Type what you want in plain language — for example: "make these bars pulse with the bass and add a soft glow that follows the beat." The AI writes a real GLSL fragment shader for your zones. Not a canned preset: a shader generated for your artwork. If you prefer a proven starting point, the EQ Bars starter effect renders a 16-band equalizer with peak marks out of the box.

Step 4: Enable audio and pick your input

Activate audio in the editor and choose an input device. Speak, or play music through your chosen input, and watch the scene react. The analysis engine does the hard work for you: automatic gain keeps quiet and loud sources equally lively, and a noise gate makes sure silence actually looks calm instead of flickering with room noise. There is also a built-in audio simulator, so you can design a scene without a microphone.

Step 5: Tune it live

Parameterized effects expose live controls for properties such as intensity, speed, colors, and spread. If an effect has no controls yet, you can generate them before tuning the preview. Adjust the controls while the preview runs until it feels right. This is the part template overlays can never give you.

Step 6: Export the OBS overlay

Open the project hub and choose OBS Overlay (HTML). You get a single file named after your project, for example my_scene_obs_overlay.html. The overlay variant has no visible controls, a transparent background, and starts playing on its own — it is built specifically to be dropped into OBS.

Step 7: Add it to OBS

1. In OBS, add a source: + → Browser.
2. Check Local file and select your exported HTML file.
3. Set the size to your canvas resolution, typically 1920 × 1080. At the exact aspect ratio the scene fills the source pixel-perfectly; at other sizes it letterboxes with transparent bars.

If your scene uses audio, the overlay asks for microphone access — scenes without audio reactivity never trigger a permission prompt.

Step 8 (optional): Drive it with music

For a music-reactive overlay, install a virtual audio cable, route your music player into it, and select the cable as your input device. This is the standard streamer pattern for feeding music into browser-based tools.

For the visualizer look specifically — spectrum bars with peak marks — see the companion guide: Audio Visualizer Overlay for OBS.

Frequently asked questions

Does the overlay react to music or only to my microphone?

The overlay listens to an audio input device. To make it react to music, route your music player into a virtual audio cable (for example VB-Audio Cable) and use that as the input device. Your microphone works out of the box for voice-reactive scenes.

What happens if OBS does not grant microphone access?

Nothing breaks. The overlay keeps running its time-based animation, silently retries audio in the background, and never shows an error inside your stream. As a fallback you can open the overlay file in a normal browser window and add it to OBS with a window capture.

Is Reactor Studio free?

Creating effects, playing with the demo controls, and previewing everything in the browser is free, and a free account includes a one-time starter credit of AI generations. Saving and syncing across devices, creating your own controls, and exporting files — including the OBS overlay — are part of Pro (CHF 4.50 per month early price, regularly CHF 9).

Does the overlay need an internet connection while streaming?

No. The export is a single self-contained HTML file. OBS loads it from your disk as a local file; no server or connection is required while you stream.