Spotify Viber

A premium, fullscreen Spotify Web Visualizer that reacts to live audio using the Web Audio API and the device's microphone/system loopback.

Features

• Spotify OAuth Integration: Authenticates with Spotify to fetch and display the currently playing track's artwork, song name, and artist.
• Ultra-Low Latency Audio Sync: Bypasses rate-limited Web APIs by using the browser's native AnalyserNode to perform Fast Fourier Transforms (FFT) on your microphone or system audio feed, achieving near instant 0-latency synchronization.
• Dynamic Visualizer Modes:
  • HALO: 3 overlapping layers of flowing Bezier curves mapped to polar coordinates around the album art.
  • AURA: A screen-filling, radial light gradient that pulses and morphs like a lava lamp.
  • BARS: A classic neon 64-band equalizer running across the bottom of the screen.

Project Structure

• frontend/: The React+Vite frontend where all the visualization and Spotify player UI lives.
• server.js: A minimalistic Node.js Express server to handle Spotify OAuth callbacks, token exchange, and environment variables without exposing secrets to the browser.

Installation & Setup

1. Setup Spotify Developer Credentials

   • Go to your Spotify Developer Dashboard.
   • Create an App and get your Client ID and Client Secret.
   • Set your Redirect URI to http://127.0.0.1:8888/callback (must be 127.0.0.1, not localhost).

2. Create a .env file in the root directory:

   SPOTIPY_CLIENT_ID=your_client_id
   SPOTIPY_CLIENT_SECRET=your_client_secret
   SPOTIPY_REDIRECT_URI=http://127.0.0.1:8888/callback

3. Install dependencies:

   npm install
   cd frontend && npm install

4. Run the full stack (backend Auth server + Vite development preview):

   npm run dev