Music Streaming System
System design for music streaming with player, playlists, search, and offline support
Design a music streaming system (Spotify, Apple Music) with player, playlists, search, and offline downloads.
R - Requirements
Key Questions:
- How many songs? (millions)
- Playlists? (user-created, curated, collaborative)
- Offline support? (download songs, play offline)
- Audio quality? (128kbps, 320kbps, lossless)
- Real-time sync? (playback position across devices)
- Recommendations? (based on listening history)
Common Answers:
- Millions of songs
- User playlists + curated playlists
- Offline downloads supported
- Multiple quality options
- Real-time sync across devices
- Personalized recommendations
A - Architecture
Playback Flow:
Music Streaming Architecture:
Architecture Decisions:
- Client-side for player UI (SPA) - Fast interactions, offline support
- Audio API (Web Audio API, HTML5 Audio) - HTML5 Audio for simplicity
- Offline storage (IndexedDB for downloaded songs) - Store audio files, metadata
- Real-time sync (WebSocket for playback position) - Sync across devices
- CDN for audio files (edge caching) - Low latency, high availability
Relevant Content:
- Offline-First Architecture - Downloads
- Real-Time Architecture - Playback sync
D - Data Model
Talking Points:
- Music player state - Current song, playback position, queue, shuffle/repeat
- Playlist management - User playlists, collaborative playlists, queue
- Offline downloads - Downloaded songs, storage management, sync
State Management:
- Current song (metadata, playback position)
- Playlist/queue (array of songs)
- Playback state (playing, paused, loading)
- Shuffle/repeat modes
- Offline downloads (downloaded songs, storage)
Caching:
- Song metadata cache (normalized, by song ID)
- Playlist cache (user playlists, queue)
- Offline storage (IndexedDB for downloaded audio)
Relevant Content:
- Persistence Strategies - Offline storage
- Caching Patterns - Metadata cache
I - Interface
Talking Points:
- Music player - Play/pause, next/prev, progress bar, volume, shuffle/repeat
- Playlist UI - Create, edit, add/remove songs, collaborative editing
- Search interface - Search songs, artists, albums, playlists
- Library view - Songs, albums, artists, playlists, downloaded
Features:
- Music player (play/pause, next/prev, progress, volume)
- Playlist UI (create, edit, add/remove songs)
- Search interface (songs, artists, albums)
- Library view (songs, albums, artists, playlists)
- Offline downloads (download indicator, manage storage)
- Recommendations (personalized, based on history)
Relevant Content:
- Autocomplete Search - Search interface
- Virtualized List - Playlist/song lists
O - Optimizations
Performance:
- Audio preloading (preload next song)
- Progressive audio loading (stream while playing)
- Offline caching (download for offline)
- Image optimization (album art, artist images)
Real-Time:
- Playback sync (sync position across devices)
- Queue sync (sync queue across devices)
Relevant Content:
- Asset Optimization - Audio files
- Background Sync - Offline sync
- Network-Aware Components - Quality adaptation
Implementation Checklist
- Music player (play/pause, next/prev, progress, volume)
- Playlist management (create, edit, add/remove)
- Search interface (songs, artists, albums)
- Library view (songs, albums, artists, playlists)
- Offline downloads (download, manage storage)
- Playback sync (across devices)
- Queue management (add, remove, reorder)
- Shuffle/repeat modes
- Recommendations (personalized)
- Image optimization (album art)
Common Pitfalls
❌ No audio preloading → Gap between songs
✅ Preload next song, stream while playing
❌ No offline support → Can't play without internet
✅ Download songs to IndexedDB, play offline
❌ No playback sync → Position lost when switching devices
✅ WebSocket sync, save position, restore on device switch
❌ No queue management → Can't control playback order
✅ Queue system, add/remove/reorder, shuffle/repeat