One-Line Intro
I built an Android app that reads Spotify/YouTube Music playback sessions and lets users control play/pause/seek by moving a virtual tonearm like a real turntable.\
Why I Built It
Most music player UIs are function-focused, but often lack emotional, tactile interaction.
So I aimed to create a turntable interface centered on “visual immersion + physical-like control.”
Key Implementation Points
1) Tonearm Gesture-Based Playback Control
- Drag the needle onto the LP to start playback
- Move the needle out to the white area to pause
- While seeking with the slider, the tonearm position updates in real time
2) Realism Enhancements
- Platter rotation animation + tonearm movement synced to playback position
- 3-layer metallic tonearm lighting (armBase / shadow / highlight)
- Scratch SFX and haptic feedback on needle drop
3) Lyrics UX
- Full LRC parsing (timestamp tags + offset support)
- Line-by-line active lyric highlighting
- Async lyric lookup with manual edit/save fallback
4) Device Adaptation
- Phone/tablet/landscape responsive support
- Separate presets for foldables (Flip cover/open states)
- Reordered control priorities for extreme aspect ratios
5) External Controls
- prev / play-next / needle in-out from notification and lock screen
- Same actions available through a home screen widget
Tech Stack
- Kotlin, Jetpack Compose, Material3
- MediaSession / NotificationListenerService
- StateFlow + Coroutines
- Gradle Kotlin DSL
Challenges & Tradeoffs
- MediaSession metadata quality varies by app, so lyrics/seek/duration needed defensive branching.
- Foldables required dedicated layout presets; aspect-ratio-only logic was not enough.
- Needle jitter/responsiveness had to be tuned carefully: too realistic could feel less usable.
Outcome
- The result is more than a simple playback remote; it delivers a tactile, interactive control experience.
- As a portfolio project, it showcases both UI/UX craftsmanship and Android system-integration skills.
Future Improvements
- Theme-specific advanced shader/lighting parameter sets
- Widget customization (button layout/size/transparency)
- Manual lyric sync calibration UI (+/- ms)
- Release signing and store-deployment automation