# Spotify Now Playing

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

<p align="center">
  <a href="https://bckelley.github.io/spotify-player/"><b>Live Demo</b></a>
</p>

![Screenshot](screenshot.GIF)

## 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:**
   ```sh
   git clone https://github.com/bckelley/spotify-player.git
   cd spotify-player
   ```

2. **Set up a Spotify Developer App:**
   - Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/applications)
   - 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](https://tailwindcss.com/) via CDN for rapid styling.
- **Icons:** Uses [Font Awesome](https://fontawesome.com/) 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](https://developer.spotify.com/documentation/web-api/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Font Awesome](https://fontawesome.com/)
- Inspired by [bckelley/spotify-player](https://github.com/bckelley/spotify-player)

---

**Built by bckelley** · [Source](https://github.com/bckelley/spotify-player)