OBS Studio Integration

OSMV integrates with OBS Studio using a Browser Source for the animated music card and standard Text/Image sources for all Snaz-style live files.

Adding the Music Widget (Browser Source)

The music widget uses shared/index.html, shared/style.css, and shared/widget.js together with shared/widget_config.json / .js and shared/current_song.json / .js to render your OBS Overlay Studio configuration (cover art, custom text templates, marquee scrolling, transitions, dynamic colors, audio visualizer, and custom CSS).

Before adding it to OBS, design and test your overlay directly in Now Playing using the embedded Live OBS Stage Preview or click Browser Preview (shared/preview.html).

Option A: Single Default Style (Local File)

1. Click the + icon in the Sources box of OBS Studio.
2. Select Browser.
3. Name the source (e.g., OSMV Music).
4. In the properties window:
   • Check Local file.
   • Click Browse and select shared/index.html from your OSMV folder.
   • Set Width and Height to give your widget and visualizer room (e.g., 600 x 200).
5. Click OK.

Option B: Multi-Scene Presets (?preset=<Name>)

To display different styles or layouts per OBS scene (for example, classic during gameplay and vinyl on Just Chatting):

1. In Now Playing -> Presets & Style, save your configured style under Saved Presets (Multi-Scene OBS) and click Scene URL (or append ?preset=<Name> using a built-in preset like classic, glass, neon, compact, vinyl, minimal, banner).
2. In OBS Browser Source properties, leave Local file unchecked.
3. Paste the file:///.../shared/index.html?preset=<Name> URL into the URL field.
4. Click OK (use Refresh cache of current page in OBS whenever you want to force an immediate reload).

Adding Dynamic Text Sources

All enabled text modules write to shared/dynamic_text/ (or your custom output directory configured in Settings):

• Time & Date: Time.txt, Date.txt
• Timers & Chronos: Countdown.txt, ChronoDown.txt, ChronoUp.txt
• System Info: SystemInfo.txt
• Textline Changer: TextlineChanger.txt (or custom filename)
• Now Playing Text: TrackArtist.txt, TrackSong.txt, TrackAlbum.txt, PlayingNow.txt
• Twitch: TwitchViewers.txt
• Dynamic Files (Text): <rule_filename>.txt

Step-by-step Setup:

1. Click + in Sources and choose Text (GDI+) on Windows or Text (FreeType 2) on Linux.
2. Check Read from file.
3. Click Browse (or use the Copy button in OSMV) and select the .txt file inside shared/dynamic_text/.
4. Click OK.

[!TIP] For crisp text scaling in OBS, choose a large font size (such as 72pt) inside the text source properties and scale down the bounding box in your scene.

Adding Dynamic Image Sources

If you configure a Dynamic Files rule with Type = Image, add an Image source in OBS Studio pointing to the generated image path inside shared/dynamic_text/.