Spotify Now Playing

A simple web app to display your current Spotify playback, built with vanilla JS, Tailwind CSS, and the Spotify Web API.

Live Demo

Features

• Spotify OAuth Login (PKCE flow, no backend required)
• Displays current track (title, artist, album, album art)
• Playback controls (play, pause, next, previous) for Spotify Premium users
• Responsive, modern UI using Tailwind CSS and Font Awesome icons
• Shows playback progress bar
• Profile picture and user info

Requirements

• Spotify account (Premium required for playback controls)
• Modern browser (uses ES modules and Fetch API)

Getting Started

1. Clone this repo:

   git clone https://github.com/bckelley/spotify-player.git
   cd spotify-player

2. Set up a Spotify Developer App:

   • Go to Spotify Developer Dashboard
   • Create an app and set the Redirect URI to your local/test URL (e.g. http://localhost/spotify/)
   • Copy your Client ID and update it in spotify-api.js and auth.js if needed.

3. Run locally:

   • Place the project in your local web server root (e.g. c:\laragon\www\spotify)
   • Open http://localhost/spotify/ in your browser

4. Login with Spotify:

   • Click the "Login with Spotify" button and authorize the app.

File Structure

index.html           # Main UI
main.js              # App logic and UI updates
spotify-api.js       # Spotify API and OAuth logic
auth.js              # (Optional) Separate auth logic
ui.js                # UI helper functions
pkce.js              # PKCE utility functions

Customization

• Styling: Uses Tailwind CSS via CDN for rapid styling.
• Icons: Uses Font Awesome for playback controls.
• Profile: Shows your Spotify profile picture if available.

Notes

• Playback controls (play, pause, next, previous) require a Spotify Premium account.
• The app polls the Spotify API every 2 seconds for updates.
• No backend server is required; all logic runs in the browser.

Credits

• Spotify Web API
• Tailwind CSS
• Font Awesome
• Inspired by bckelley/spotify-player

---

Built by bckelley · Source