Spotify YS Player

areyes86 — Sat, 10 Jan 2026 19:48:29 GMT

I built a custom, browser-based Spotify player as a personal learning project to explore how far Spotify’s Web API and embedded playback experience can be extended while keeping performance and UI minimal.

The Spotify Yearly Statistic (YS) Player started as an experiment around refining Spotify’s embedded experience and evolved into a lightweight, interactive player that focuses on fast load times, modern UI behavior, and richer metadata presentation. The project is intended purely for educational and demonstration purposes.

Player Modes

Full Player view with detailed track and artist metadata
Mini Player view for compact display
Dark and light UI modes

Authentication Flow

Widget → Local server → Spotify OAuth
Spotify → Auth code → Local server → Access/refresh tokens
Widget → Auth status → Player loads live data

Authentication is handled via Spotify’s OAuth flow. On first launch, the user authorizes Spotify access, and subsequent sessions reuse cached credentials to avoid repeated logins.

Once authenticated, the widget loads:

Now Playing track data
Artist metadata (followers, genres, popularity)
Lightweight tables and generated “fun facts”

Project Goals

Build a minimal, fast-loading music player
Reduce UI lag with deferred and selective API calls
Enable playback immediately after authentication
Explore UI behavior outside standard embed constraints

Key Features

Secure Spotify authentication and token handling
Real-time track and artist metadata
Capsule-style UI with responsive layout
Mini / Full view switching
Background animation turn on/off toggle while playing music.
Optimized async API usage
Export entire yearly liked songs to a new Spotify playlist.

Tech Stack

CoffeeScript
Übersicht widgets
Spotify Web API
Custom HTML/CSS styling

Outcome

The project helped me better understand Spotify’s API behavior, authentication flow, and how UI sequencing impacts perceived performance. It also served as a useful sandbox for testing lightweight player concepts outside the standard embed model.

I’m sharing this here to discuss implementation details, tradeoffs, and API behavior — happy to answer questions or dive deeper into any part of the flow.