amll-PiP-Player
- 1 Devlogs
- 4 Total hours
A minimalist, aesthetically pleasing desktop Picture-in-Picture (PiP) music player powered by Vue 3 and the Apple Music Like Lyrics (AMLL) rendering engine.
A minimalist, aesthetically pleasing desktop Picture-in-Picture (PiP) music player powered by Vue 3 and the Apple Music Like Lyrics (AMLL) rendering engine.
Feedback
Hey Cret,
Awesome project! I'd love to see what you make in the future!
For any other questions, DM @arungeorgesaji or create a ticket in Slack- #ask-the-shipwrights.
Shipwright walkthrough
For the past few weeks, I’ve been pouring my heart into building AMLL PiP Player—and honestly, I’m beyond proud of how it turned out! I’ve always been obsessed with Apple Music’s gorgeous, bouncing syllable-by-syllable lyrics and colorful ambient fluid glow, but I hated that there wasn’t a lightweight, cross-platform way to have that pinned on my desktop while coding or doing homework. So instead of waiting for someone else to make it, I built it myself completely from scratch in the browser using Vue 3 and TypeScript! By taking advantage of the cutting-edge Document Picture-in-Picture API and File System Access API, I managed to create a 100% client-side player that indexes your local tracks, automatically pairs them with rich .ttml / .lrc lyrics and album art, and pops out into a floating, frosted-glass desktop card that stays pinned on top of any window. Pushing the limits of what a high schooler can build with modern web standards, no backend, and zero data tracking—it feels surreal seeing an aesthetic I dreamed of running so smoothly on my own screen!