feat: plugins/web: use media session api for notifications. (#5714)

The Media Session API provides a way to customize media notifications.
This PR has commits that, in summary, updates the metadata for the media
session whenever a new track (item) starts playing.

https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API

Author: snejus

beetsplug/web/static/beets.js

@@ -266,7 +266,9 @@ var AppView = Backbone.View.extend({
     playItem: function(item) {
         var url = 'item/' + item.get('id') + '/file';
         $('#player audio').attr('src', url);
-        $('#player audio').get(0).play();
+        $('#player audio').get(0).play().then(() => {
+            this.updateMediaSession(item);
+        });
 
         if (this.playingItem != null) {
             this.playingItem.entryView.setPlaying(false);
@@ -275,6 +277,26 @@ var AppView = Backbone.View.extend({
         this.playingItem = item;
     },
 
+    updateMediaSession: function (item) {
+      if ("mediaSession" in navigator) {
+        const album_id = item.get("album_id");
+        const album_art_url = "album/" + album_id + "/art";
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: item.get("title"),
+          artist: item.get("artist"),
+          album: item.get("album"),
+          artwork: [
+            { src: album_art_url, sizes: "96x96" },
+            { src: album_art_url, sizes: "128x128" },
+            { src: album_art_url, sizes: "192x192" },
+            { src: album_art_url, sizes: "256x256" },
+            { src: album_art_url, sizes: "384x384" },
+            { src: album_art_url, sizes: "512x512" },
+          ],
+        });
+      }
+    },
+
     audioPause: function() {
         this.playingItem.entryView.setPlaying(false);
     },

docs/changelog.rst

@@ -8,6 +8,9 @@ Unreleased
 
 New features:
 
+* :doc:`plugins/web`: Show notifications when a track plays. This uses the
+  Media Session API to customize media notifications.
+
 Bug fixes:
 
 For packagers: