How I Built a Custom "Now Playing" Widget for My Portfolio (Without Relying on the Spotify API)
· Pradeep Chandran M
Cloudflare Workers, Android, React
How I Built a Custom "Now Playing" Widget for My Portfolio (Without Relying on the Spotify API) When building my personal portfolio, I wanted it to feel alive. A static page with a list of projects is great, but I wanted visitors to get a glimpse of my personality right in that exact moment. Since I'm almost always listening to music while I code, adding a live "Now Playing" widget felt like the perfect touch. Initially, I thought about just hooking into the Spotify API. But there was a catch: I don't just use Spotify. I frequently switch between Spotify and YouTube Music. The YouTube Music API is notoriously closed off, and I didn't want to build two completely separate integrations. I needed a universal solution that could capture whatever was playing on my phone and beam it directly to my website. Here is how I built a custom, end-to-end "Now Playing" pipeline using an Android app, Cloudflare Workers, and a simple frontend poller. The Architecture The system is broken down into three main parts: 1. The Observer (Mobile App): Listens to my phone's notifications to see what music player is active. 2. The Middleman (Cloudflare Worker): Receives the song data and temporarily stores it. 3. The Display (Portfolio Component): Constantly asks the middleman what's playing and updates the UI. "By relying on OS-level notifications rather than specific APIs, this method becomes completely platform-agnostic. If it has a media notification, my website can display it." Let's break down how each part works. Part 1: The Observer (Mobile App) The brain of the operation lives on my Android phone. Whenever you play a song on Android—whether it's Spotify, YouTube Music, Apple Music, or even a podcast app—it creates a media notification. I built a lightweight background app that utilizes Android's NotificationListenerService. This service allows the app to fire an onNotificationPosted event whenever a new notification appears or updates. How it works: The app constantly listens for…