← Back to Widget Setup

Music Widget Setup Guide

Allow Browser Permissions

Depending on your web browser, you might be asked to allow the setup page to "Access other apps and services on this device".
If you are using Pear Desktop (YouTube Music) or Cider (Apple Music) you must click "Allow", or the widget will fail to connect.

Spotify Setup

⚠️ Heads up: Spotify requires the developer app owner to have Spotify Premium and limits each account to one development mode app. If that's a dealbreaker, use YouTube Music instead.
Step 1

Create a Spotify Developer App

  1. Go to the Spotify Developer Dashboard and sign in.
  2. Click "Create App" and fill in:
    • App name: Nyan Music Overlay
    • App description: Anything you want
    • Redirect URI: https://music.nyako.cat/
    • Which API/SDKs are you planning to use? Select "Web API"
  3. Click "Save".
Step 2

Copy your credentials

On your app's settings page, copy the Client ID and Client Secret (click "View client secret" to reveal it).

Step 3

Enter credentials & authorize

  1. On the widget setup page, select Spotify and paste your Client ID and Client Secret.
  2. Click "Authorize with Spotify".
  3. On the Spotify page that opens, click "Agree".
  4. You'll be redirected back - you should see "Setup finished". You're connected!

YouTube Music Setup

YouTube Music works through Pear Desktop, a desktop app that wraps YouTube Music and exposes a local API.

Step 1

Install Pear Desktop

Download and install Pear Desktop for your OS, then open it.

Step 2

Enable the HTTP API plugin

  1. In Pear Desktop, go to Settings → Plugins.
  2. Enable the HTTP API plugin.
Step 3

Connect

  1. On the widget setup page, select YouTube Music.
  2. Keep all the default options (unless you changed the address/port in Pear Desktop).
  3. Click "Request Authorization".
  4. Switch to Pear Desktop and click "Allow" on the prompt that appears.
  5. You should see "Setup finished". You're connected!
⚠️ Keep Pear Desktop running! The widget talks directly to the app. If you close it, the overlay obviously won't work :p

Customize Your Widget

Once connected, use the "Widget appearance" section on the setup page to tweak the look. The live preview updates in real time.

🎨 Widget Style

StyleDescription
Slim (compact v1)Thin horizontal bar w/ progress overlay.
Inverse slimLike slim but wider - song title & artist styling is swapped
Full-sizedLarger album art with more room for text.
TransparentShows minimal information: album artwork, track name, and artist name.

✨ Animations

AnimationDescription
Fade in/outSmooth fade. Good default.
Slide from leftSlides in from the left edge.
Slide from rightSlides in from the right edge.
Drop from topDrops down from the top of the screen. Possibly the least used option but still good.

👁️ Visibility

ModeDescription
Always visibleAlways on screen, no hiding or special effects. Hides after music is not detected for a long period.
Hide on pauseHides 2 seconds after music is paused, reappears on play.
Only on song changeAppears briefly when a new song starts, then hides. Adjust the duration with the slider.

Add to OBS

Step 1

Copy your widget URL

Click the "Widget link" field at the top of the preview panel to copy it.

🔒 Don't share this URL! It contains your encoded credentials. Treat it like a password.
Step 2

Add a Browser Source

  1. In OBS, click + in the Sources panel → select "Browser".
  2. Paste your widget URL into the "URL" field.
  3. Set width/height: try 400×100 (slim), 400×150 (full), or 200×200 (transparent).
  4. Uncheck "Shutdown source when not visible" and "Refresh browser when scene becomes active".
  5. Click OK and drag the widget to your desired position. You're done!

Troubleshooting

The widget is blank / nothing shows up
  • Is music playing? The widget only shows data when something is actively playing (unless you're in "always visible" mode).
  • Spotify: Make sure the setup page says "Setup finished.", that you have premium, and that you entered the correct credentials.
  • YouTube Music: Make sure Pear Desktop is open, HTTP API plugin is enabled
  • Try refreshing the browser source in OBS (right-click → "Refresh").
  • You may also have been asked to grant permission to "Access other services on this device". If you pressed no to that, go to your browser's site settings and fix it lol
Spotify says "token expired" or stops working

Tokens auto-refresh, but if it stops working:

  • Go to the setup page, click "Reset Spotify auth" in the Danger Zone, and re-authorize.
  • Copy the new widget URL and update your OBS browser source.
YouTube Music / Pear Desktop won't connect
  • Make sure Pear Desktop is running and the HTTP API plugin is enabled.
  • Double-check the host and port match what Pear Desktop shows.
  • If OBS and Pear Desktop are on different machines, use the LAN IP and make sure the port isn't firewalled.
  • When you click "Request Authorization", switch to Pear Desktop and click "Allow" if it asks you.
The widget looks weird / wrong size in OBS
  • Right-click the source → Properties → adjust width/height (Slim: 400×100, Full: 400×150, Transparent: 200×200).
I changed settings but the widget didn't update

Settings are baked into the URL. Copy the new widget URL from the setup page and update it in your OBS browser source properties.

Can't create a Spotify Developer App

Spotify requires the app owner to have Premium and limits you to 1 dev app. Consider switching to YouTube Music via Pear Desktop instead.

The authorization prompt in Pear Desktop doesn't appear
  • Make sure you clicked "Request Authorization" on the setup page first.
  • If authorization is disabled, you won't get a prompt. Otherwise check the prompt isn't behind other windows.
  • Finally, try restarting Pear Desktop.