Add a stunning real-time audio visualizer to OBS Studio in minutes — using a simple Browser Source. Works with all 8 visualization modes.
OBS Studio is the most widely used streaming and recording software in the world, and its Browser Source feature makes it trivial to add web-based tools directly into your scene as live, interactive overlays. The WebGuysLLC Audio Visualizer is purpose-built to work this way — open the tool in a browser, capture that window in OBS, and your scene gains a real-time audio-reactive visual layer instantly.
Because the visualizer runs entirely in the browser with no server communication, the latency is effectively zero — the visual reacts to audio at the same time your stream captures it. And because it's a standard web page, you can resize, reposition, crop, and layer it exactly like any other OBS source.
All eight visualization modes work in OBS: Frequency Bars and Frequency Spectrum, Circular Wave, Waveform, Particle Field, Radial Burst, Galaxy Stars, and UFO Flight. Each creates a distinctly different look, and you can switch between them in real time without interrupting your stream.
Follow these steps to have a live audio visualizer in your OBS scene in under five minutes.
Go to webguysllc.com/visualizer/app in Google Chrome. Chrome is recommended for the best Web Audio API support and system audio capture. Click Start Visualizer and grant microphone permission if prompted.
Use the Visualization Mode dropdown to pick your preferred mode — Circular Wave and Frequency Bars are the most popular for OBS. Set your Color Scheme, Sensitivity, and Smoothing to taste. These can also be changed live while streaming.
For music playing on your PC, select System Audio as the audio source. Click Start, choose Chrome Tab, select the tab playing your music, check Share tab audio, and click Share. For microphone input, select Microphone instead.
In OBS Studio, click the + button in the Sources panel and select Browser. Name it (e.g. 'Audio Visualizer') and click OK. In the URL field, enter the visualizer URL. Set Width and Height to match your scene resolution (e.g. 1920×1080 for full screen, or 400×400 for a corner overlay).
Drag the Browser Source to your desired position in the scene preview. For a Circular Wave overlay, use OBS's Image Mask/Blend filter to apply a circular crop. For a Waveform strip, resize the source to a slim horizontal band (e.g. 1920×100) and position it at the bottom of your scene.
Right-click the Browser Source and select Filters. Add a Color Correction filter to adjust opacity if you want the visualizer to sit subtly behind your content. A 70–80% opacity often gives the best balance between visual impact and readability of other scene elements.
You're done. Hit Start Streaming in OBS — the visualizer will react live to your audio throughout the broadcast. Switch modes or adjust settings in the browser tab at any time; changes appear in your stream immediately.
Add the visualizer Browser Source to multiple scenes in OBS — your main stream scene, BRB screen, starting-soon screen, and ending screen. Each can use a different visualization mode and color scheme for variety throughout your broadcast.
For modes like Circular Wave, try setting the visualizer background to a solid green color in your browser's developer tools and applying a Chroma Key filter in OBS. This removes the background entirely, leaving only the visualization shape — perfect for layering over gameplay footage.
The visualizer runs at 60fps in the browser. If you notice performance issues during streaming, reduce the Browser Source refresh rate in OBS to 30fps (in the Browser Source properties), or lower the FFT resolution by dropping the Sensitivity slider slightly.
More guides to help you get the most from the WebGuysLLC Audio Visualizer.
Open the visualizer, pick your mode and colors, then follow the steps above to add it to OBS. Takes less than five minutes.