Spotify YS Player

[areyes86]

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.