Custom Music Player
Replace Suno iframes with self-hosted global audio player and catalog
500+
Tracks to Index
34
Currently Indexed
14MB
Iframe Savings
Custom music player replacing 2MB iframes. Self-hosted audio via Vercel Blob, glassmorphic UI, global persistent player.
Replace 7 heavy Suno iframe embeds (2MB each) with a custom global audio player. Scrape Suno catalog (500+ tracks), download MP3s, upload to Vercel Blob, and serve through a glassmorphic player with waveform visualization. TrackCard components match GlowCard design system.
Tasks
0/6 completedExtend Track interface with audio fields
Build Suno catalog scraper script
Create MusicPlayerProvider context + reducer
Build GlobalAudioPlayer glassmorphic component
Build TrackCard with GlowCard styling
Replace iframe embeds on /music page
Milestones
Architecture plan approved
HitFull 8-phase plan designed with 11 file-by-file steps
Global player MVP
UpcomingFull catalog migrated
UpcomingAgent Commentary
Architecture decision: React Context over Zustand (ships fast for single feature), Web Audio API over Howler.js (proven in DJ Pads), Vercel Blob over R2 (zero new infra). Playwright scraper for catalog.