beat visualizer
Launch visualizer

How to add a music visualizer to OBS (browser source guide)

Beat Visualizer team

OBS + music visualizer in under 5 minutes

Adding a music visualizer to OBS is one of the fastest ways to improve a music stream, lo-fi broadcast, or DJ set background. Beat Visualizer runs in a browser tab and integrates with OBS as a Browser Source — no extra software required.

Option A: Browser Source (recommended)

  1. Open Beat Visualizer in Chrome and configure your look: choose a mode, palette, and sync setting. Copy the share URL to preserve the setup.
  2. In OBS, click + in the Sources panel and select Browser Source.
  3. Paste your Beat Visualizer URL as the URL.
  4. Set Width and Height to your canvas size (e.g. 1920×1080).
  5. Tick Control audio via OBS if you want OBS to push audio into the browser source.

The browser source renders directly inside OBS without any visible browser chrome.

Option B: Window Capture

If audio routing is simpler with a visible browser window:

  1. Open Beat Visualizer in fullscreen in Chrome.
  2. In OBS, add a Window Capture source and select the Chrome window.
  3. Use OBS Crop/Pad filter to trim any browser UI.

Audio routing for reactivity

The visualizer only reacts if the browser tab receives audio. Common approaches:

  • Virtual audio cable (VB-Audio, BlackHole, JACK): route music output → virtual input → browser mic
  • OBS monitoring: enable OBS audio monitoring and set output to a device the browser can see
  • Physical loopback: on some hardware the browser can capture desktop audio directly

Best modes for streaming

Modes that survive bitrate compression well: matrix, neon rain, laser grid, oscilloscope, equalizer 3D. Busy particle fields can get noisy at 6 Mbps — test before going live.

More resources

See the streaming visualizer and music visualizer for OBS tool pages for platform-specific tips.