Vinylfo OBS Support - Advanced Guide

Quick Start

The simplest way to add Vinylfo's feeds to OBS:

Add a Browser Source in OBS
Choose a feed type and set the URL:

Video: http://localhost:8080/feeds/video?overlay=bottom&theme=dark
Album Art: http://localhost:8080/feeds/art?theme=dark&animation=true
Track Info: http://localhost:8080/feeds/track?theme=dark&speed=5

Set dimensions: 1920 width × 1080 height
Click OK

Feeds will automatically sync with your Vinylfo playback using Server-Sent Events.

Feed Types

Vinylfo provides three OBS-friendly feeds. Add a Browser Source in OBS for each:

Video Feed

URL: http://localhost:8080/feeds/video

Displays YouTube videos synced with Vinylfo playback. Falls back to album art when no video is available.

Use cases: Full music video playback, lyric videos, visual content alongside audio

Album Art Feed

URL: http://localhost:8080/feeds/art

Full-screen album art display with optional Ken Burns animation.

Use cases: Background visuals during tracks, clean minimalist stream graphics, photo gallery style display

Track Info Feed

URL: http://localhost:8080/feeds/track

Infinite marquee displaying track metadata (artist, title, album).

Use cases: Lower third scrolling text, song identification overlays, radio-style scrolling displays

All feeds use Server-Sent Events (SSE) for real-time synchronization.

URL Configuration Options

All options are passed as URL query parameters.

Feed URLs

Feed	URL
Video Feed	`http://localhost:8080/feeds/video`
Album Art Feed	`http://localhost:8080/feeds/art`
Track Info Feed	`http://localhost:8080/feeds/track`

Video Feed Parameters

Parameter	Options	Default	Description
`overlay`	`bottom`, `top`, `none`	`bottom`	Track info overlay position
`theme`	`dark`, `light`, `transparent`	`dark`	Color scheme for text and backgrounds
`transition`	`fade`, `slide`, `none`	`fade`	Animation when track changes
`showVisualizer`	`true`, `false`	`true`	Show/hide audio visualizer
`quality`	`auto`, `high`, `medium`, `small`	`auto`	YouTube video quality preference
`overlayDuration`	`0`-`30`	`5`	Seconds before overlay auto-hides (0 = never)

Album Art Feed Parameters

Parameter	Options	Default	Description
`theme`	`dark`, `light`, `transparent`	`dark`	Background color scheme
`animation`	`true`, `false`	`true`	Enable Ken Burns animation
`animDuration`	`5`-`120`	`20`	Animation duration in seconds
`fit`	`contain`, `cover`	`cover`	How image fits the viewport

Track Info Feed Parameters

Parameter	Options	Default	Description
`theme`	`dark`, `light`, `transparent`	`dark`	Text color scheme
`speed`	`1`-`10`	`5`	Marquee scroll speed (1=slow, 10=fast)
`separator`	any string	`*`	Separator between track elements
`showDuration`	`true`, `false`	`true`	Show track duration
`showAlbum`	`true`, `false`	`true`	Show album title
`showArtist`	`true`, `false`	`true`	Show artist name
`direction`	`rtl`, `ltr`	`rtl`	Scroll direction (right-to-left or left-to-right)
`prefix`	any string	`Now Playing:`	Text prefix before track info

Example URLs

Video Feed

http://localhost:8080/feeds/video?overlay=bottom&theme=dark&transition=fade

Album Art Feed

# Dark theme with Ken Burns animation (20s default)

http://localhost:8080/feeds/art?theme=dark&animation=true

# Light theme, no animation, contain fit

http://localhost:8080/feeds/art?theme=light&animation=false&fit=contain

# Fast animation (5 seconds)

http://localhost:8080/feeds/art?theme=dark&animation=true&animDuration=5

Track Info Feed

# Default dark theme, standard speed

http://localhost:8080/feeds/track?theme=dark

# Light theme, fast scroll, no duration

http://localhost:8080/feeds/track?theme=light&speed=10&showDuration=false

# Left-to-right scroll, custom prefix

http://localhost:8080/feeds/track?direction=ltr&prefix=Now%20on%20air:&theme=transparent

Common OBS Setups

1. Full-Featured Video Stream

Best for general streaming with full information display.

Settings: Overlay: Bottom track info, Theme: Dark, Transition: Smooth fade, Visualizer: On

http://localhost:8080/feeds/video?overlay=bottom&theme=dark&transition=fade&showVisualizer=true&quality=auto&overlayDuration=5

2. Album Art Background

Best for background visuals during playback, minimalist stream graphics.

Tip: Set Browser Source to 1920x1080 and use Blend Modes > Normal over your main content.

http://localhost:8080/feeds/art?theme=dark&animation=true&animDuration=20&fit=cover

3. Scrolling Track Info (Lower Third)

Best for song identification overlays, radio-style displays.

Tip: Position at the bottom of your canvas and adjust width to fit your layout.

http://localhost:8080/feeds/track?theme=dark&speed=5&direction=rtl&prefix=Now%20Playing:

4. Clean Album Art Focus

Best for music-focused streams where album art is the focus.

http://localhost:8080/feeds/video?overlay=none&showVisualizer=true&quality=high

5. Transparent Track Overlay

Best for keying over video backgrounds, clean overlays.

Tip: Use Chroma Key filter to remove any remaining background.

http://localhost:8080/feeds/track?theme=transparent&direction=ltr&speed=3

6. Fast Scrolling Track Info

Best for high-energy streams, quick information display.

http://localhost:8080/feeds/track?theme=dark&speed=10&showDuration=true&separator=|

7. Minimal Video Info

Best for streams where you want subtle track identification.

http://localhost:8080/feeds/video?overlay=bottom&theme=dark&showVisualizer=false&overlayDuration=3

8. Transparent Keying (Green Screen)

Best for using with OBS chroma key filter for custom backgrounds.

OBS Setup: Add Browser Source → Right-click → Filter → Add Chroma Key filter

http://localhost:8080/feeds/video?theme=transparent&overlay=bottom&overlayDuration=0

9. Slide Transition (Dynamic Movement)

Best for high-energy streams with dynamic visuals.

http://localhost:8080/feeds/video?overlay=bottom&theme=dark&transition=slide&showVisualizer=true

10. Light Theme for Bright Backgrounds

Best for overlaying on light-colored video content.

http://localhost:8080/feeds/art?theme=light&animation=false

11. Multiple Synchronized Feeds

Best for professional broadcast-style streams with multiple visual elements.

Layer 1 (Bottom): http://localhost:8080/feeds/art?theme=transparent&animation=false

Layer 2 (Middle): http://localhost:8080/feeds/video?overlay=none&showVisualizer=false

Layer 3 (Top): http://localhost:8080/feeds/track?theme=transparent&direction=ltr&speed=5

Tip: Use Move filter to reorder layers in OBS.

OBS Setup Instructions

Adding Vinylfo as a Browser Source

Open OBS Studio
In the Sources panel, click the + button
Select Browser
Enter a name (e.g., "Vinylfo Video Feed")
Click OK

Configuration Dialog

URL	`http://localhost:8080/feeds/video?overlay=bottom&theme=dark`
Width	`1920` (or your canvas width)
Height	`1080` (or your canvas height)
Control audio via OBS	✓ Enabled (recommended)

Recommended OBS Settings

Custom CSS: Leave empty (Vinylfo handles styling)
Shutdown source when not visible: Unchecked
Refresh browser when scene becomes active: Checked

Audio Setup

To route Vinylfo audio through OBS:

In the Browser Source properties, check Control audio via OBS
In OBS Audio Mixer, you'll see a "Browser" channel
Adjust levels as needed
Use Advanced Audio Properties to route to specific outputs

Features Overview

Video Feed Features

Video Layer

Displays YouTube videos matched to tracks
Automatically plays/pauses with Vinylfo playback
Quality adapts based on network (configurable)
No YouTube controls visible (clean overlay)

Album Art Fallback

When a track has no YouTube video match:

Displays album art with animated "Ken Burns" effect
Smooth crossfade between tracks
Visualizer continues on top

Track Info Overlay

Shows current track information:

Track title
Artist name (normalized, e.g., removes "(2)" suffixes)
Album title
Album art thumbnail

Position options: bottom - Standard lower third, top - Upper overlay, none - Hidden

Themes: dark - Black translucent background, light - White translucent background, transparent - No background (for chroma key)

Audio Visualizer

Real-time frequency visualization:

Animated bar graph
Responds to audio levels
Can be toggled on/off
Optional on all themes

Transitions

Animations when changing tracks:

fade - Smooth opacity crossfade (recommended)
slide - Horizontal slide animation
none - Instant cut

Album Art Feed Features

Full-Screen Display

Displays album art at full viewport size
Options for contain or cover fit
Works with any aspect ratio

Ken Burns Animation

Slow pan and zoom effect
Configurable duration (5-120 seconds)
Can be disabled with animation=false

Themes

dark - Dark gradient background
light - Light gradient background
transparent - No background

Idle State

When no track is playing:

Animated vinyl record icon
"No track playing" message

Track Info Feed Features

Infinite Marquee

Smooth continuous scrolling text
Duplicated content for seamless loop
Scroll direction configurable (rtl/ltr)

Speed Control

10 speed levels (1=slowest, 10=fastest)
Maps to animation duration (60s at speed 1, 10s at speed 10)
Clamped to 10-60 second range

Customizable Content

Toggle artist, album, duration display
Custom separator character
Custom prefix text

Themes

dark - White text on dark
light - Dark text on light
transparent - White text with shadow (for any background)

Connection Status

All feeds include automatic reconnection handling:

Shows "Connecting..." indicator if SSE disconnects
Auto-reconnects with exponential backoff
Minimal visual disruption

All three feeds share the same SSE connection pattern for synchronized updates.

Troubleshooting

Video Not Playing

Problem: Black screen or "No track playing" message

Solutions:

Ensure Vinylfo server is running
Start playback in Vinylfo main interface
Check that the track has a YouTube match

Album Art Not Showing

Problem: Album art feed shows vinyl icon or no image

Solutions:

Ensure tracks have album art assigned
Check album art file is valid
Try cache-busting: change ?v= parameter
Verify album art URL is accessible

Marquee Not Scrolling

Problem: Track info feed shows static text instead of scrolling

Solutions:

Check if content width exceeds container (marquee only scrolls if text is wider than viewport)
Try shorter prefix or disable some fields (showAlbum=false)
Verify direction parameter is set correctly
Check browser console for animation errors

Scroll Speed Issues

Problem: Marquee scrolls too fast or too slow

Solutions:

Adjust speed parameter (1-10)
Lower speed value = longer animation duration
Speed 1 = ~60s cycle, Speed 10 = ~10s cycle

Audio Not Working

Problem: No audio from video feed

Solutions:

Check "Control audio via OBS" is enabled
Ensure OBS audio levels are not muted
Check system audio output settings

CORS Errors in Console

Problem: Console shows CORS errors related to googleads.g.doubleclick.net

Explanation: These are YouTube's internal ad tracking requests. They are blocked by browser security but do not affect playback.

Solution: These errors are harmless. Video and audio will work normally.

OBS Not Showing Updates

Problem: Video feed doesn't update when you change tracks in Vinylfo

Solutions:

Check both Vinylfo and OBS are on the same computer
Refresh the browser source: Right-click → Refresh
Check the URL is correct with localhost
Verify SSE connection is working (check browser console)

Chroma Key Not Working

Problem: Transparent theme not keying properly

Solutions:

Use theme=transparent option
Apply Chroma Key filter to the Browser Source
Adjust similarity and smoothness settings
Ensure overlay is not set to none

Poor Video Quality

Problem: Video looks pixelated or blurry

Solutions:

Set quality=high in URL
Increase browser source resolution
Check network connection speed

High CPU Usage

Problem: OBS running slowly with video feed

Solutions:

Set showVisualizer=false
Use transition=none instead of fade/slide
Reduce browser source resolution
Close other browser tabs
For album art feed: set animation=false

Multiple Feeds Out of Sync

Problem: Video, album art, and track feeds show different tracks

Solutions:

Refresh all browser sources
All feeds connect to same SSE endpoint and should sync automatically
Check network connectivity between OBS and Vinylfo server

Advanced Configuration

Custom CSS in OBS

While not required, you can add custom CSS for advanced customization:

Video Feed

/* Change track title font */

#track-title {

    font-family: 'Your Font Name', sans-serif;

    font-size: 32px;

}

/* Hide connection status */

#connection-status {

    display: none !important;

}

Album Art Feed

/* Remove animation */

#album-art-wrapper {

    animation: none !important;

}

/* Custom border */

#album-art {

    border: 4px solid #fff;

    border-radius: 0 !important;

}

Track Feed

/* Change font and size */

#track-text {

    font-family: 'Roboto Mono', monospace;

    font-size: 36px;

}

/* Remove text shadow for chroma key */

.theme-transparent #track-text {

    text-shadow: none;

}

Add CSS in the Browser Source properties under Custom CSS.

Multiple Synchronized Feeds

You can add multiple browser sources that stay synchronized:

# Main video feed

http://localhost:8080/feeds/video?overlay=bottom

# Album art background (use as layer below video)

http://localhost:8080/feeds/art?theme=transparent

# Track info scrolling (use as overlay)

http://localhost:8080/feeds/track?theme=transparent&direction=ltr

Tip: Use Move filter to reorder layers in OBS.

Hiding Connection Status

For cleaner overlays, hide the connection status indicator:

/* All feeds */

#connection-status {

    display: none !important;

}

Customizing Album Art Animation

/* Shorter, faster animation */

#album-art-wrapper {

    animation-duration: 10s !important;

}

/* Zoom effect only (no pan) */

@keyframes kenBurns {

    0% { transform: scale(1); }

    100% { transform: scale(1.15); }

}

Customizing Marquee Speed

The speed parameter controls animation duration:

Speed 1 = 60 second cycle
Speed 5 = 30 second cycle
Speed 10 = 10 second cycle

For more control, use CSS:

/* Force specific duration */

.marquee-content.animating {

    animation-duration: 45s !important;

}

Integrating with Other Sources

All feeds are designed to work alongside other OBS sources:

Use Crop/Pad to resize
Use Color Correction filters for matching
Use Blend Modes for creative effects
Use Move filter for layering

Technical Notes

How It Works

SSE Connection: All feeds maintain a Server-Sent Events connection to receive real-time updates at /feeds/video/events
Shared Event Stream: Video, album art, and track feeds all use the same SSE endpoint for synchronized updates
YouTube IFrame: Videos embed via YouTube's iframe API with no external controls
Auto-Sync: Video position syncs with Vinylfo's playback position

Feed Comparison

Feature	Video Feed	Album Art Feed	Track Feed
Full-screen video	Yes	No	No
Album art display	Yes (fallback)	Yes	No
Scrolling text	No	No	Yes
YouTube playback	Yes	No	No
Visualizer	Yes	No	No
Best for	Video content	Background art	Text overlays

Port Requirements

Default port: 8080
SSE uses: /feeds/video/events endpoint
All traffic: Localhost only (no external servers)

Browser Compatibility

Tested and working on:

Chrome/Edge (recommended)
Firefox
OBS built-in browser (Chromium-based)

Performance Considerations

Video feed: Highest resource usage (YouTube video decoding)
Album art feed: Low resource usage, minimal with animation=false
Track feed: Very low resource usage (just text rendering)

For best performance, use only the feeds you need.

Support

For issues or questions:

Check browser console for error messages (F12 → Console)
Verify Vinylfo server is running without errors
Check GitHub issues for known problems
When reporting issues, specify which feed(s) you're using