Spotify Now Playing

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

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

Clone this repo:

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

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://${app url/spotify/)
- Copy your Client ID and update it in spotify-api.js and auth.js if needed.
Run locally:
- Place the project in your local web server root I used laragon (e.g. c:\laragon\www\spotify)
- Open http://${app url}/ in your browser
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

Built by bckelley · Source