TIL — Web apps can define media controls

For years I have enjoyed following Simon Willison’s blog, where he writes about various open source projects, technical tips and tricks, niche museums, and other topics beloved by people named Simon. He had a recent post encouraging people to blog more, and with the downfall of Twitter I’ve thinking about that myself. A format he uses, and evangelizes, it to simply share things he learns in the form of Today I Learned (TIL) posts. It’s a great idea — when you learn something new you’re excited about it, why not just get it out there and introduce it to other people.

TIL about the Media Session API, which lets web developers customize media notifications, artwork, and playback controls. What does this mean in practical terms? When you’re listening to audio on your phone with an app like Spotify or your favorite podcast player, the related artwork will show up on the home screen along with playback controls like “skip backwards 10 seconds” or “next track.” The audio also responds appropriately if you press pause on your headphone controls, or tell Siri to stop playing. Native apps have long been able to hook into these OS-level controls for media in a way that web apps couldn’t. But now they can — with the Media Session API.

I may have heard inklings about this in the past, but ignored it because support wasn’t there yet. Looking again, it now seems broadly supported, including the all important mobile as of iOS 15. If this capability had existed back in 2012 I would have written News Now as a web app, which would have been way easier and more fun. I don’t have the appetite to rewrite that now, but I’ll be holding on to the knowledge of Media Session API for future projects.

This capability would be perfect for projects like the Syrian Cassette Archives. They already have it set up so that when you save that website to your home screen it runs like a self-contained app. The only thing missing is the media controls.