So, thanks to @limebar@mastodon.social and @scy@chaos.social who implemented this feature for TIBR and TIBtv, I discovered how to send metadata to the system media player when you play my music on my site (using the Media Session API).
What 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.
It could have ended there, but that’s when things got out of hand... In the following image, you’ll notice you can’t skip to the previous or next track.
But it turns out you can handle these actions with the mediaSession API, provided you have your own functions to do the actual work.
This revealed a different paradigm between what I had implemented on the site, and how a system media player works.
- On my site, you could keep skipping tracks, including the last track of an album.
- 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.
Which means that in the end, I had to:
- Rethink my “skip” function as a “next track” function
- Write a “previous track” function
- Add a “previous track” button to my weird UI (and to my keyboard shortcuts (available in “about”)
- 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)
- 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
- 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.
Phew... I told you things got out of hand! All this probably deserves more than a 0.0.1 version bump...
Hopefully, 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!
Media player on the Mac:
Greyed-out buttons in my UI and in the iPhone 7 media player:
