Skip to main content

​
Quick Start Guide

Get Player2 running locally in just a few minutes.

​
Prerequisites

Before you begin, ensure you have:

Node.js

Version 16 or higher

Package Manager

npm or yarn

Spotify Account

Premium account required

Spotify Developer App

API credentials from Spotify Dashboard

​
Installation

1

Clone the Repository

Clone the Player2 repository to your local machine:
git clone <your-repo-url>
cd player2
2

Install Dependencies

Install all required packages:
npm install
3

Configure Environment Variables

Create a .env file from the example template:
cp .env.example .env
Then add your Spotify API credentials:
.env
VITE_SPOTIFY_CLIENT_ID=your_client_id_here
VITE_SPOTIFY_REDIRECT_URI=http://localhost:5173
Make sure to replace your_client_id_here with your actual Spotify Client ID from the Spotify Developer Dashboard.
4

Start the Development Server

Run the development server:
npm run dev
The application will be available at http://localhost:5173
5

Connect to Spotify

Open your browser and navigate to http://localhost:5173. You’ll be prompted to:
  1. Log in to your Spotify account
  2. Authorize Player2 to access your playback
  3. Start playing music!
Player2 requires these Spotify scopes:
  • user-read-playback-state - Read your currently playing track
  • user-modify-playback-state - Control playback
  • user-library-read - Access your saved tracks

​
Using Player2

​
Basic Controls

Once connected, you can control your Spotify playback:
  • Play/Pause - Click the play button or press Space
  • Skip Forward - Click next button or press → (Right Arrow)
  • Skip Back - Click previous button or press ← (Left Arrow)
  • Seek - Drag the progress slider (hover over album art)

​
Features

Click the lyrics button to toggle synchronized lyrics display. Lyrics are automatically fetched from LRCLIB and scroll in real-time with the music.
LyricsDisplay component
// Lyrics are fetched and cached automatically
<LyricsDisplay.Button />  // Toggle button
<LyricsDisplay.Lyrics />  // Lyrics display
Use the search feature to find and play songs, albums, or artists directly from the interface.
Click the queue icon to view your current playback queue. You can reorder tracks with drag-and-drop.
Access your saved tracks by clicking the heart icon. The library supports infinite scroll for large collections.
Right-click on any track to see quick actions like adding to queue, viewing the album, or exploring the artist.

​
Build for Production

To create a production-optimized build:
1

Build the Application

npm run build
This creates an optimized build in the dist/ directory.
2

Preview the Build

Test your production build locally:
npm run preview

​
Troubleshooting

If you see “Missing Spotify Credentials”, ensure:
  1. Your .env file exists in the project root
  2. Environment variables are prefixed with VITE_
  3. You’ve restarted the development server after creating .env
If Spotify authorization fails:
  1. Verify your Client ID is correct
  2. Ensure http://localhost:5173 is added to your Redirect URIs in the Spotify Developer Dashboard
  3. Clear browser cache and try again
Player2 requires an active Spotify playback session. Make sure:
  1. You have Spotify Premium
  2. You’re playing music on a Spotify device
  3. The Spotify app or web player is open

​
Next Steps

Detailed Setup

Learn more about Spotify Developer setup, environment configuration, and deployment options.

Build docs developers (and LLMs) love

Get started for freeTalk to us