A clean, customizable "Now Playing" overlay for Twitch streams. Displays the current Spotify track with album art, song title, artist, and an animated progress bar — all in a browser source you drop straight into OBS or Streamlabs.
Live: dexteritycs.github.io/Spotify-widget/
- Real-time Spotify track display via OAuth (no server required)
- Album art, song title, artist name, and animated progress bar
- Multiple color presets: Light, Dark, Midnight — plus full custom color picker
- SLOBS-compatible backtick (
`) interact menu for on-the-fly color changes and logout - Credentials persist in URL hash — no re-login between OBS sessions
- Session expiry banner with one-click reconnect
- Go to developer.spotify.com/dashboard
- Click Create App
- Set the Redirect URI to:
https://dexteritycs.github.io/Spotify-widget/ - Copy your Client ID
- Add a Browser Source to your scene
- URL:
https://dexteritycs.github.io/Spotify-widget/ - Width:
400| Height:120(adjust to taste) - Check Refresh browser when scene becomes active
- Open the URL in a regular browser tab
- Paste your Client ID when prompted
- Click Connect with Spotify and authorize
- Close the tab — OBS will pick up the token automatically
Press the backtick key (`) while the browser source is focused to open the interact menu. Choose from presets or set custom hex colors for background, text, and the progress bar accent. Changes persist across reloads.
- Vanilla HTML/CSS/JS — zero dependencies, zero server
- Spotify Web API —
user-read-currently-playing,user-read-playback-statescopes - PKCE OAuth flow (token stored in URL hash for SLOBS compatibility)
- Polls every 5 seconds for track updates