MusicApp
C9Music — Full-Stack Music Streaming Platform
Full-Stack Developer & UI/UX Designer
Overview
A full-stack music streaming app — a Laravel backend with an Apple-Music-style Vue 3 SPA. It pairs an uninterrupted global player with real-time synced lyrics and full artist and admin tooling.
The challenge
Streaming UX lives or dies on uninterrupted audio and efficient delivery — raw uploads are heavy and expensive to serve, and playback must survive navigation and feel native on mobile.
It also needed real tooling for two sides of the marketplace: artists uploading releases, and admins managing users and content.
The approach
The Laravel backend transcodes every upload (MP3/WAV/OGG) to Opus with FFmpeg to cut bandwidth, and extracts duration with ffprobe. A Vue 3 + Pinia SPA runs a persistent global player — queue, shuffle, repeat — that survives route changes, with a mini-bar and a full-screen mobile mode.
Lyrics support both plain text and synchronized .lrc with smooth auto-scroll and current-line highlighting; the Media Session API powers lock-screen and headphone controls; and role-based cabinets give artists release management and admins user management with system logs.
Key capabilities
Persistent global player
Pinia-driven queue, shuffle and repeat that never stops on navigation, plus Media Session controls.
Real-time synced lyrics
Synchronized .lrc with auto-scroll and line highlighting; plain-text fallback.
Opus transcoding pipeline
FFmpeg converts uploads to Opus to save bandwidth; ffprobe reads duration.
Artist & admin cabinets
Role-based areas: artists publish releases, admins manage users and logs.