Spotify Now Playing

English | 日本語 | English for Vercel | Vercel用日本語

A web application that displays your current Spotify track with a beautiful UI. It includes a PWA-enabled Admin panel for playback control, Discord notifications, Misskey auto-posting, and Twitter sharing integration.

• Prerequisites
• Installation
• Configuration
  • 1. Spotify Developer Setup
  • 2. Environment Variables
  • 3. Obtaining the Refresh Token
• Development
• Production Deployment
  • Build
  • Process Management (PM2)
  • Reverse Proxy (Nginx) & SSL
• Usage

• Node.js (v16 or higher recommended)
• npm (Node Package Manager)
• A Spotify Developer account
• A server/VPS for production (optional)

1. Clone the repository:

   git clone https://github.com/otnc/SpotifyNowPlaying.git
   cd spotifynowplaying

2. Install Backend Dependencies:

   npm install

3. Install Frontend Dependencies:

   cd frontend
   npm install
   cd ..

1. Go to the Spotify Developer Dashboard
2. Create a new App
3. Note down the Client ID and Client Secret
4. In the App settings, add the following Redirect URI:

   http://127.0.0.1:3456/callback
   

Create a .env file in the root directory:

touch .env

Add the following content to .env:

PORT=3333
SPOTIFY_CLIENT_ID="your_spotify_client_id"
SPOTIFY_CLIENT_SECRET="your_spotify_client_secret"
SPOTIFY_REFRESH_TOKEN=""  # Leave empty for now, see Step 3
ADMIN_PASSWORD="set_your_secure_password"
DISCORD_WEBHOOK_URL="your_discord_webhook_url"  # Optional
MISSKEY_HOST="misskey.example.com"              # Optional: your Misskey instance hostname
MISSKEY_API_KEY="your_misskey_api_key"          # Optional: Misskey API key

#NowPlaying
Song Title - Artist Name
https://open.spotify.com/track/...

Since Spotify requires a one-time user authorization to access your playback state, you need to generate a Refresh Token.

1. Run the setup script:

   npx ts-node src/setup-token.ts

2. Follow the instructions in the terminal:

   • Copy the generated URL and open it in your local browser
   • Log in to Spotify and authorize the app
   • You will be redirected to a page that may fail to load (e.g., http://127.0.0.1:3456/callback...). This is normal.
   • Copy the entire URL from your browser's address bar
   • Paste the URL back into the terminal prompt and press Enter
   • The script will output your SPOTIFY_REFRESH_TOKEN

3. Update your .env file with the generated token.

To run the project locally with hot-reloading:

npm run dev

• Frontend: http://localhost:3333 (Proxied via Vite/Express)
• Admin Panel: http://localhost:3333/admin

Compile the TypeScript backend and build the Svelte frontend:

npm run build

This will create a dist folder for the server and build the frontend assets into public.

Use PM2 to keep the application running in the background.

1. Install PM2 globally (if not installed):

   sudo npm install -g pm2

2. Start the application:

   pm2 start ecosystem.config.js
   pm2 save
   pm2 startup

To serve the app via a domain (e.g., spotify.example.org) with HTTPS.

1. Install Nginx:

   sudo apt update
   sudo apt install nginx

2. Configure Nginx: Create a config file at /etc/nginx/sites-available/spotify.example.org:

   server {
       listen 80;
       server_name spotify.example.org;
   
       location / {
           proxy_pass http://127.0.0.1:3333;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
   }

3. Enable Site & Restart Nginx:

   sudo ln -s /etc/nginx/sites-available/spotify.example.org /etc/nginx/sites-enabled/
   sudo nginx -t
   sudo systemctl restart nginx

4. Setup SSL (Certbot):

   sudo apt install certbot python3-certbot-nginx
   sudo certbot --nginx -d spotify.example.org

• URL: https://spotify.example.org/
• Features: Read-only view of the currently playing track. No controls available.

• URL: https://spotify.example.org/admin
• Features: Full playback controls (Play, Pause, Skip), Tweet button.
• Access: Requires the password set in ADMIN_PASSWORD.
• PWA: Can be installed as a standalone app on mobile devices.