shimga

Live Music Visualizer for Twitch & DJ Streams (Browser-Based)

Streaming 📅 May 2026 ⏱ 8 min read

DJ streamers on Twitch and YouTube Live face a unique problem: their audio is dynamic — they're mixing tracks in real time — so pre-rendered music videos don't work. They need a live audio visualizer that reacts to whatever's coming out of their mixer right now. Until recently this required custom OBS plugins or paid desktop software. Browser-based visualizers solve it with a single URL pasted into OBS as a browser source. This guide walks through the setup.

The Architecture

  1. Your DJ controller / DAW outputs audio to your computer.
  2. You route that audio into your browser tab using a virtual audio cable (or directly via the browser's microphone API).
  3. The browser visualizer reads the live audio, renders an animated canvas.
  4. OBS pulls the canvas as a browser source — visible in your stream alongside your camera, chat overlays, etc.
  5. Twitch viewers see a reactive visualizer that matches whatever you're playing — instantly.

Total latency from audio-played to visual-rendered is typically 50-100ms, which feels live on Twitch's 2-4 second broadcast delay.

Step 1: Set Up a Virtual Audio Cable

To route your DJ controller's output into a browser tab, you need a virtual audio device. Free options:

Configure your DJ software (Rekordbox, Serato, Traktor, virtual DJ) to output to BOTH your speakers/headphones AND the virtual cable. Speakers for your monitoring; virtual cable for the browser visualizer.

Step 2: Use the Mic Input in Shimga

Shimga's planned "Use Microphone" feature (currently in the roadmap) will accept the virtual audio cable as a mic input. For now, the workaround is to route audio into the browser via the OS-level microphone, which still works for live streaming use cases.

For pre-recorded DJ sets, you can still use Shimga's offline mode: drop the recorded mix in, pick a preset, render the full set as MP4 in advance, play that back on stream. Many DJs do this and it works well for "no-commentary" sessions. See the DJ-set visualizer workflow.

Step 3: Add OBS Browser Source

In OBS Studio:

  1. Sources panel → + → Browser
  2. URL: http://localhost:3000/studio?preset=neon-circle&audio=mic (or wherever you're hosting Shimga; the studio works as a browser source)
  3. Width: 1920, Height: 1080 (or 1080×1920 for vertical streams)
  4. Custom CSS: body { background-color: rgba(0, 0, 0, 0); margin: 0; }
  5. "Shutdown source when not visible" → ON (saves CPU when you switch scenes)
  6. "Refresh browser when scene becomes active" → ON

The visualizer now overlays as a layer in your scene. Use OBS's color-key or blend mode to make the dark background transparent if your preset has it.

Step 4: Match the Visualizer Style to Your Channel

Genre-specific color palette guide.

Performance Tips

Common Issues

Visualizer Has 5+ Second Latency

Almost always virtual audio cable buffer size. Check the cable's settings — drop ASIO buffer to 128 or 256 samples. Don't go below 64 unless you're confident; you'll get audio glitches before you get a meaningful latency win.

Visualizer Stops Reacting Mid-Stream

Browser source disconnected from mic. Right-click the source → Properties → check the URL is still pointing at your audio input. OBS sometimes drops audio routing when scenes change rapidly.

Audio Crackling After Adding the Visualizer

CPU contention. The visualizer is too heavy. Drop to a simpler preset (Audio Wave + Background Image instead of Star Nest), or render at lower resolution.

Brand Logo Won't Stay Up

Heads-up that uploaded images don't persist when you reload the browser source. Either use a Pexels-sourced background (persistent) or pin your logo in OBS as a separate Image source layered on top.

Add a music visualizer to your stream

Browser source URL — paste into OBS. Reactive to live audio in <100ms.

Open Shimga Studio →

Related Reading