Design a Music Player – Frontend System Design

We’ll walk through the frontend system design for a music streaming app like Spotify. Our goal is a browseable catalog with a player that never dies when the route changes: a persistent bar, a reorderable queue, adaptive bitrate audio, and a resume position that survives a refresh. You’ll see why the player is a singleton outside the router, how MSE (and DRM) actually feed an <audio> element, and how progress writes stay off the hot path.

The interview fails the moment a song stops because the user clicked a playlist. That is an architecture bug, not a CSS bug. We’ll mount the audio engine on the app shell, keep timeupdate out of the global store, and treat playback as a server-issued session so a second device can take over.

Problem Statement

Build the frontend for a music streaming app like Spotify.

Requirements:

• Browse playlists, albums, and search
• A persistent player bar that keeps playing while the user navigates
• A queue the user can reorder
• Offline downloads for a playlist
• Playback should... premium content.