Skip to content

🎧 See synchronized Spotify lyrics inside VS Code while coding

License

Notifications You must be signed in to change notification settings

therepanic/spotilyrics

Repository files navigation


Spotilyrics logo

See synchronized Spotify lyrics inside VS Code while coding.


✨ Features

  • πŸ“Œ Live lyrics sync with your Spotify playback.
  • 🎨 Lyrics colors auto-themed from album cover (via colorthief).
  • πŸ–₯️ Smooth side panel view – code on the left, lyrics on the right.
  • πŸ“± Mobile mode – black unplayed lines, white played lines (like Spotify mobile app).
  • πŸ”‘ Simple one-time login using your own Spotify Client ID.
  • πŸšͺ Quick logout command to reset session.
  • ⚑ Set a maximum tracks cache size for lyrics syncing.

πŸ“Έ Demo

⚑️ Installation

  1. Open VS Code β†’ Extensions β†’ search spotilyrics or install from VS Code Marketplace.

  2. Run the command:

Show Spotify Lyrics via Spotilyrics

πŸ”‘ Authentication (one-time setup)

  1. Go to Spotify Developer Dashboard.
  2. Create an app β†’ copy Client ID.
  3. Important: set the Redirect URI for your app to: http://127.0.0.1:<port>/callback (default: 8000).
    You can change the port in settings (spotilyrics.port) or via the command Set Spotify OAuth Callback Port.
  4. Run the Show Spotify Lyrics via Spotilyrics command.
  5. Paste your Client ID in the panel and log in.
  6. Enjoy synced lyrics while coding! 🎢

ℹ️ Why? – To respect Spotify API rate limits, you need your own ID.


⌨️ Commands

  • Show Spotify Lyrics via Spotilyrics (spotilyrics.lyrics) – open synced lyrics panel.
  • Toggle Mobile Mode (spotilyrics.toggleMobileMode) – switch between normal and mobile mode.
  • Logout from Spotilyrics (spotilyrics.logout) – clear session and re-auth when needed.
  • Set Tracks Cache Max Size (spotilyrics.setTracksCacheMaxSize) – configure the maximum number of tracks cached for lyrics.
  • Set Spotify OAuth Callback Port (spotilyrics.setPort) – set the local callback port used for Spotify OAuth.

βš™οΈ Tech stack


πŸ“œ License

This project is licensed as Unlicensed.
Feel free to use, hack, and remix it – but no warranties πŸ˜‰


Made with ❀️ by therepanic. Code hard, vibe harder 🎧