OBS-Overlay, das auf Musik reagiert — Schritt für Schritt

Ein audioreaktives Overlay entsteht als einzelne HTML-Datei, die du in OBS als Browserquelle lädst. Reactor Studio ist ein Editor im Browser, der dir genau diese Datei baut: Du markierst Zonen auf deinem eigenen Bildmaterial, beschreibst den gewünschten Effekt in normaler Sprache, eine KI schreibt den WebGL-Shader dazu, und am Ende exportierst du eine in sich geschlossene HTML-Datei mit transparentem Hintergrund — fertig für OBS. Ohne Programmieren, ohne OBS-Plugins.

Was du brauchst

• OBS Studio oder ein anderes Streaming-Werkzeug, das Browserquellen unterstützt
• einen aktuellen Browser (Chrome, Edge, Firefox oder Safari)
• ein Bild als Grundlage: deine vorhandene Overlay-Grafik, ein Logo oder ein BRB-Bild
• optional für Musikreaktion ein virtuelles Audiokabel wie VB-Audio Cable
• etwa 15 Minuten

Schritt 1: Editor öffnen und dein Bildmaterial laden

Öffne Reactor Studio — der Editor läuft in deinem Browser, es ist nichts zu installieren. Leg ein Projekt an und füge das Bild hinzu, das du animieren willst. Dieses Bild ist dein Bezugsrahmen: Alles, was du danach baust, ist daran verankert.

Schritt 2: Die Teile markieren, die reagieren sollen

Zeichne Zonen über die Bildteile, die sich bewegen, leuchten oder pulsieren sollen — die Balken eines Equalizers, den Rahmen deines Webcam-Bilds, die Buchstaben deines BRB-Texts. Zonen geben der KI genaue Koordinaten. Dadurch landen die Effekte dort, wo du sie haben willst, statt irgendwo auf der Canvas.

Schritt 3: Den Effekt beschreiben

Tipp in normaler Sprache, was du willst — zum Beispiel: «Lass diese Balken im Takt des Basses pulsieren und leg ein weiches Leuchten darüber, das dem Beat folgt.» Die KI schreibt daraufhin einen echten GLSL-Fragment-Shader für deine Zonen. Keine Konserve aus einer Vorlagensammlung, sondern ein Shader für dein Bildmaterial. Wenn du lieber von einem erprobten Ausgangspunkt startest: Der Starteffekt EQ Bars rendert einen Equalizer mit 16 Bändern samt Spitzenmarken.

Schritt 4: Audio aktivieren und Eingang wählen

Aktiviere Audio im Editor und wähle ein Eingabegerät. Sprich hinein oder spiel Musik über den gewählten Eingang, und sieh zu, wie die Szene reagiert. Die Analyse nimmt dir dabei die Arbeit ab: Eine automatische Verstärkungsregelung hält leise und laute Quellen gleich lebendig, und ein Noise-Gate sorgt dafür, dass Stille auch wirklich ruhig aussieht, statt vom Raumrauschen zu flackern. Für den Entwurf ohne Mikrofon gibt es ausserdem einen eingebauten Audio-Simulator.

Schritt 5: Live nachjustieren

Parametrisierte Effekte bringen Live-Regler für Eigenschaften wie Intensität, Geschwindigkeit, Farben und Streuung mit. Hat ein Effekt noch keine Regler, kannst du sie vorher erzeugen lassen. Verstelle sie dann, während die Vorschau läuft, bis das Ergebnis stimmt. Genau das kann dir ein Overlay von der Stange nie geben.

Schritt 6: Das OBS-Overlay exportieren

Öffne den Projekt-Hub und wähle OBS Overlay (HTML). Du bekommst eine einzelne Datei, benannt nach deinem Projekt, zum Beispiel my_scene_obs_overlay.html. Diese Overlay-Variante hat keine sichtbaren Bedienelemente, einen transparenten Hintergrund und startet von selbst — sie ist eigens dafür gebaut, in OBS eingebunden zu werden.

Schritt 7: In OBS einbinden

1. Füge in OBS eine Quelle hinzu — + → Browser.
2. Kreuze Lokale Datei an und wähle deine exportierte HTML-Datei.
3. Stell die Grösse auf deine Canvas-Auflösung, üblicherweise 1920 × 1080. Beim exakt gleichen Seitenverhältnis füllt die Szene die Quelle pixelgenau; bei anderen Grössen bleiben durchsichtige Ränder.

Nutzt deine Szene Audio, fragt das Overlay beim Start nach Mikrofonzugriff. Szenen ohne Audioreaktion lösen nie eine Berechtigungsabfrage aus.

Schritt 8 (optional): Mit Musik ansteuern

Für ein musikreaktives Overlay installierst du ein virtuelles Audiokabel, leitest deinen Musikplayer hinein und wählst das Kabel als Eingabegerät. Das ist der übliche Weg, auf dem Streamer Musik in browserbasierte Werkzeuge einspeisen.

Wie der Visualizer-Look im Besonderen entsteht — Spektrumbalken mit Spitzenmarken —, steht im Begleitguide Audio-Visualizer in OBS einrichten.

Häufige Fragen

Reagiert das Overlay auf Musik oder nur auf mein Mikrofon?

Das Overlay hört auf ein Audio-Eingabegerät. Damit es auf Musik reagiert, leitest du deinen Musikplayer über ein virtuelles Audiokabel (zum Beispiel VB-Audio Cable) und wählst dieses als Eingang. Dein Mikrofon funktioniert ohne Umweg für sprachreaktive Szenen.

Was passiert, wenn OBS keinen Mikrofonzugriff gewährt?

Nichts bricht ab. Das Overlay läuft mit seiner zeitbasierten Animation weiter, versucht im Hintergrund still erneut Audio zu bekommen, und zeigt nie einen Fehler im Stream. Als Rückfallweg öffnest du die Overlay-Datei in einem normalen Browserfenster und bindest sie per Fensteraufnahme in OBS ein.

Was kostet Reactor Studio?

Effekte bauen, mit den Demo-Reglern spielen und alles im Browser ansehen ist gratis. Ein kostenloses Konto enthält zusätzlich ein einmaliges Startguthaben für KI-Generierungen. Speichern, geräteübergreifendes Synchronisieren, eigene Regler und der Export gehören zu Pro, aktuell CHF 4.50 pro Monat als Einführungspreis, regulär CHF 9.

Braucht das Overlay während des Streams eine Internetverbindung?

Nein. Der Export ist eine einzelne, in sich geschlossene HTML-Datei. OBS lädt sie von deiner Festplatte; während des Streams ist weder ein Server noch eine Verbindung nötig.