🎵 Spotify Now Playing OBS Web Widget

A lightweight, modern web widget to display your live Spotify track on your OBS Studio stream overlays. Powered by the Lanyard API.

---

✨ Features

• 🎨 Glassmorphism Aesthetic: Modern translucent design with background album blur & smooth gradients.
• ⚡ Real-Time WebSocket Updates: Live playback progress and track switching with zero delay.
• 🔄 Auto-Reconnection: Automatically reconnects if WebSocket drops during stream.
• ✨ Smooth Entrance/Exit Animations: Fades in when playing music and smoothly fades out when paused.
• 🔤 Smart Text Marquee: Automatically scrolls long track titles and artist names cleanly.
• ⚙️ Customization Options:
  • hideProgress=true: Hide progress bar overlay.
  • accent=HEX: Custom progress bar accent color.
• 🖼️ Image Preloading: Eliminates image pop/flickering between track changes.

---

🚀 Quick Setup Guide

1. Enable Discord & Lanyard Integration

1. Connect your Spotify account in Discord (Settings > Connections).
2. Enable "Display current activity as a status message" in Discord (Settings > Activity Privacy).
3. Join the Lanyard Discord Server so Lanyard can track your Spotify presence.

2. Configure OBS Browser Source

1. Copy your generated URL from the widget generator page.
2. In OBS Studio, add a Browser Source.
3. Set Width: 512 and Height: 196.
4. Paste the Widget URL into the URL field.

---

🛠️ URL Query Parameters

Parameter	Type	Description	Example
id	string	Required. Your Discord User ID	?id=296386708307222528
hideProgress	boolean	Set to true to hide the progress bar fill	&hideProgress=true
accent	string	Custom progress bar color (URL encoded CSS color)	&accent=%23ff0055

---

📜 License

MIT License