{"code":200,"data":{"id":"zjuyeqk8bs","slug":"sknob-music-v5-3-1-release-notes-mediasession-edition","appearance":"norm","language":"en","rtl":false,"created":"2026-03-11T15:05:53Z","updated":"2026-03-11T20:03:09Z","title":"sknob/music v5.3.1 Release Notes, mediaSession Edition!","body":"#blogpost #music #coding\n\nSo, thanks to @limebar@mastodon.social and @scy@chaos.social who implemented this feature for [TIBR](https://theindiebeat.fm) and [TIBtv](https://tv.theindiebeat.fm), I discovered how to send metadata to the system media player when you play my music on my site (using the [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API)).\n\nWhat this means is that you can now see the title, artist and artwork in your system player when you play a song on [sknob.fr/music](https://sknob.fr/music).\n\nIt could have ended there, but that’s when things got out of hand...\n\u003c!--more--\u003e\nIn the following image, you’ll notice you can’t skip to the previous or next track. \n\n![Screen capture of the full-screen music player on an old version of iOS which shows the song title, artist and cover image currently playing (in this case, Ukulele Bonk)](https://sknob.fr/img/blog/player_01.jpg)\n\nBut it turns out you can handle these actions with the mediaSession API, provided you have your own functions to do the actual work.\n\nThis revealed a different paradigm between what I had implemented on the site, and how a system media player works. \n\n- On my site, you could keep skipping tracks, including the last track of an album.\n- Whereas the mediaSession API sensibly assumes you have \"go to the previous/next track\" buttons, and if you are on the first or the last track of a playlist, well you can’t go back or forward, respectively.\n\nWhich means that in the end, I had to:\n\n- Rethink my \"skip\" function as a \"next track\" function\n- Write a \"previous track\" function\n- Add a \"previous track\" button to my weird UI (and to my keyboard shortcuts (available in \"about\")\n- Grey out and deactivate the previous and next buttons in my weird UI when there is no previous or next track (which is what took me the longest to figure out; funny how it’s often the simple things that trip you up)\n- Add the appropriate calls in the mediaSession function to go to the previous/next track, including code to grey out the previous/next buttons in the system player when there is no previous or next track\n- This all seemed to work everywhere it was supposed to, until I noticed that the play/pause button was disabled in the media player on my old iPhone 7! So I had to add the appropriate calls in the mediaSession function to call my play/pause function.\n\nPhew... I told you things got out of hand! All this probably deserves more than a 0.0.1 version bump...\n\nHopefully, it’s all sorted out now. But before you complain, according to the spec, this is supported pretty much everywhere *except* in the Android WebView!\n\nMedia player on the Mac:\n![Mosaic of the Mac system player, showing the 4 tracks of my Cities EP with previous \u0026 next buttons, which are grayed out for the first and last track.)](https://sknob.fr/img/blog/player_02.png)\n\nGreyed-out buttons in my UI and in the iPhone 7 media player:\n\n![Mosaic of the same album in my UI, with the grayed out previous and next buttons, successively, plus a capture of the system media player on my old iPhone 7 showing the last track of the album, with a greyed out next button.](https://sknob.fr/img/blog/player_03.jpg)","tags":["blogpost","music","coding"],"images":["https://sknob.fr/img/blog/player_01.jpg","https://sknob.fr/img/blog/player_02.png","https://sknob.fr/img/blog/player_03.jpg"],"paid":false,"views":1565,"likes":3}}