Hey all,

I wrote a small QoL patch for the site, which makes your keyboard's media keys (next/prev track) work. Chrome always makes the play/pause work, but this adds support for the rest of them.

It also wires up the MediaSession API so it tells your OS what track is currently playing. In Windows, this will show the track title either in an overlay (Win10) or in the systray popup that appears when you click on the volume icon (Win11). On Android and iOS, it will display the track in the notification area at the top, and if you're listening via a Bluetooth device that supports metadata and is streaming from your phone, it should appear there too (eg. on your car stereo).

I'm not sure who maintains the site (Trash80?) or if there's a code repo, so I'll just leave this for your consideration...

var jpa = $("#jp_audio_0");

//Sync playback state with MediaSession
jpa.bind("play", function(e){
   navigator.mediaSession.playbackState = "playing";
});
jpa.bind("pause ended", function(e){ 
   navigator.mediaSession.playbackState = "stopped";
});

$("#jquery_jplayer_1").bind($.jPlayer.event.loadeddata, function(event) { 
  navigator.mediaSession.metadata = new MediaMetadata({
    //TODO: Put separate artist and title here.
    title: player.playlist[player.current].title,
    //artist: "WB Artist",
    //TODO: Put WeeklyBeats forum avatar here.
    //artwork: [{ src: "wb_forum_avatar.jpg" }],
    //eg. https://weeklybeats.com/forums/img/avatars/71804.jpg
   });
});


//Connect the MediaSession controls to control the jQuery playlist player.
navigator.mediaSession.setActionHandler("play", () => {
   player.play();
});
navigator.mediaSession.setActionHandler("pause", () => {
   player.pause();
});
navigator.mediaSession.setActionHandler("stop", () => {
   player.pause();
});

navigator.mediaSession.setActionHandler("previoustrack", () => {
    player.previous();
});
navigator.mediaSession.setActionHandler("nexttrack", () => {
    player.next();
});

The code will work if you just paste it in your JS console in your browser, but to integrate it properly, it just needs to run once during page initialization, after all the jPlayer and Playlist stuff is initialized. I also included some TODOs for the maintainer that require some data that's not easy accessible in the playlist data right now: It would be cool to have the artist and title separate, as well as the URL of the forum avatar for the artist, so that we could feed that data into the MediaSession API (see the TODOs). That will make the experience even nicer!

Edit: and to be more specific about what would need to change on the backend - If the endpoint at /music/player could be modified to add the artist, track_title, and forum avatar fields, then I think those will magically be available in the JS at player.playlist[player.current].artist (etc), and then you'd just need to tweak a couple lines where we set the MediaMetadata to use that.

Thanks,
gify