How It Works
The Spotify overlay polls the Spotify API every second to check what you're currently playing. When you skip a track or a new song starts, the overlay updates on stream within about one second. When you pause or stop, the overlay fades out cleanly. When you start playing again, it fades back in.
Everything runs server-side — OBS only loads a single Browser Source URL. There's nothing to install, no browser extension, no companion app. If OBS crashes and restarts, the overlay picks up exactly where it left off.
What it shows
- • Song title (marquee scrolls long titles)
- • Artist name
- • Album name (optional)
- • Album art
- • Playback progress bar
- • Track duration
Smart color
- • Extracts 2 vivid colors from album art
- • Progress bar fills with album colors
- • Animations use album palette
- • Crossfades when track changes
Requirements
- • Spotify account (Free or Premium)
- • OBS Studio
- • obs-overlays.com account (free)
Setup (2 minutes)
Create a free account
Sign up at obs-overlays.com with your Twitch account. Takes about 10 seconds.
Open the Spotify overlay in Overlay Studio
In your dashboard, go to Overlay Studio and select the Spotify overlay.
Connect your Spotify account
Click "Connect Spotify" and log in. You'll be redirected back automatically. This grants read-only access to your currently playing track.
Copy your Browser Source URL
Once connected, the overlay preview will show your current track (or a demo track if nothing is playing). Copy the Browser Source URL.
Add to OBS as a Browser Source
Paste the URL into a new Browser Source in OBS. Set width to 1920 and height to 1080. Done.
Adding to OBS Studio
Add a Browser Source
- Open OBS Studio
- In the Sources panel, click the + button
- Select Browser
- Name it something like "Spotify Now Playing" and click OK
- Paste your overlay URL into the URL field
- Set Width to 1920 and Height to 1080
- Click OK
Recommended Browser Source settings
The overlay positions itself — use 1920×1080 regardless of your stream resolution
URL: https://obs-overlays.com/overlay/[your-overlay-id]
Width: 1920
Height: 1080
FPS: 30
Shutdown source when not visible: Unchecked
Refresh browser when scene becomes active: UncheckedPositioning
The overlay widget renders in the top-left of the 1920×1080 canvas by default. To reposition it:
- Right-click the Browser Source in OBS → Transform → Edit Transform
- Or drag it directly in the preview canvas
- Common placements: bottom-left (above sub alerts), bottom-right, or top-right corner
You can also adjust the widget width in the overlay settings (200px–1200px) so it takes up exactly the space you want.
Customization Options
All settings are changed in the Overlay Studio — the overlay in OBS updates instantly, no refresh needed.
Layout
- Width — 200px to 1200px. Controls how wide the widget is.
- Show album art — Toggle the album artwork square on/off.
- Show album name — Adds the album name in smaller text below the artist.
- Show progress bar — The playback scrubber below the track info.
- Show duration — Elapsed / total time next to the progress bar.
Typography
- Font size — 10px to 32px. Everything scales proportionally.
- Font family — Inter, Poppins, Google Sans, Courier New, or any custom font variable.
- Text color — Color picker for the track title and artist text.
Background
- Show background — Toggle the frosted card behind the widget. Disable for a fully transparent overlay.
- Background color — Set the card color (usually a dark semi-transparent tone).
- Background opacity — 0 (invisible) to 1 (fully opaque).
Colors
- Accent color — Fallback color for the progress bar and animations when album art colors can't be extracted. Defaults to Spotify green (#1DB954).
- Album art color extraction runs automatically — the progress bar and animations always match the current track's art.
Animation Presets
Animations use colors extracted from the current album art and the track's BPM data from Spotify. Faster songs animate faster. All animations pause when the track is paused and resume when it plays again.
Bokeh Default
Soft glowing orbs in album art colors float gently behind the album art. Subtle and ambient — works well on any stream aesthetic.
Glow
A slow color wash bleeds out from behind the album art in the track's two dominant colors. Stays on continuously while playing — no pulsing. Clean and unobtrusive.
Ring
A thin rotating gradient ring wraps around the album art. Rotation speed is tied to BPM — faster songs spin faster (1.5s per rotation at 160 BPM, 4s at 60 BPM).
Bars
BPM-synced equalizer bars rendered in album art colors, overlaid on the album art. Classic music visualizer look.
Pulse
A single glow that pulses in and out on every beat. Works best with high-energy tracks where the BPM is consistent.
None
No animation. Static card with album art and text only. Best if you want the most minimal, distraction-free display.
Troubleshooting
Overlay shows "Spotify not connected"
The Spotify OAuth token has expired or was revoked. Go to your Overlay Studio, open the Spotify overlay, and click Connect Spotify again to reauthorize.
Overlay is blank / nothing appears
The overlay intentionally hides itself when nothing is playing. Try playing a track in Spotify and wait 2–3 seconds — it should fade in. If it still doesn't appear, check that the Browser Source URL is correct and that the overlay is not hidden in your OBS scene.
Track info is delayed or not updating
The overlay polls every second. If it's consistently slow, try refreshing the Browser Source in OBS (right-click → Refresh cache of current page). Also check that OBS has internet access and isn't blocking the overlay URL.
Album art is not showing
Album art is proxied through our server to work around Spotify's CORS restrictions. If art fails to load, it usually means a temporary network issue. The overlay falls back to a neutral color scheme and retries on the next track change.
Overlay disappeared after OBS restart
Make sure Shutdown source when not visible is unchecked in the Browser Source settings. If the source shuts down between scenes, it loses its poll connection until OBS refreshes it.
Frequently Asked Questions
Does it work with Spotify Free?
Yes. The "currently playing" endpoint on the Spotify API works with both Free and Premium accounts. The only difference is that Free accounts may have ads — the overlay will show whatever track Spotify reports, including ad tracks, which typically have no album art.
Can viewers see what I'm playing in real time?
Yes. Updates happen within about one second of a track change. The overlay fades in when a new track starts and fades out a few seconds after you pause.
What access does connecting Spotify grant?
Only read-only access to your currently playing track (the user-read-currently-playing and user-read-playback-state scopes). We can't modify your playlists, see your listening history, or control playback.
Does it work if I play music from a different device?
Yes. Spotify's "currently playing" API returns whatever is active on your account, regardless of which device is playing — phone, desktop app, web player, smart speaker, etc.
Will it show on stream when I'm not playing music?
No. The overlay automatically hides itself when Spotify is paused or stopped. It fades back in as soon as you start playing again. No manual toggle needed.
Can I use this on Streamlabs OBS or other software?
Yes — any streaming software that supports Browser Sources works. Streamlabs OBS, StreamElements OBS Live, and XSplit all support Browser Sources. The setup steps are identical.
Does it work with Apple Music or YouTube Music?
Not currently. The overlay uses the Spotify API specifically. Apple Music and YouTube Music don't expose a public now-playing API in the same way. Spotify support is stable and complete.