A Spotify-style music player built with React 18 + TypeScript + Vite and Tailwind CSS. It streams 30-second previews from the free, keyless iTunes Search API and reproduces Spotify's signature persistent player — playback keeps going as you browse.
https://echo-music-sample.vercel.app/
- Global audio player (React Context API + a single shared
Audioelement) that survives navigation between playlists and search - Full transport controls: play/pause, next/previous, seekable progress bar, and volume
- Managed play queue — clicking a track queues the whole list and auto-advances on track end
- Search by song or artist with debounced requests
- Sidebar playlists (each backed by a catalog query) and album artwork throughout
- Zero setup: no API key, no backend, runs entirely in the browser
React 18 · TypeScript · Vite · Tailwind CSS · Context API · HTMLAudioElement · iTunes Search API
npm install
npm run devOpen http://localhost:5173. Click any track and use the bottom player bar.
npm run build
npm run preview- Tracks come from Apple's public iTunes Search API, which returns 30-second
previewUrlclips and is CORS-enabled — ideal for a frontend-only project. - To swap in the Deezer or Spotify APIs later, replace
src/api/itunes.ts; the player and UI stay the same.