Support MediaSession API

- Responds to next / previous track events
- Sets metadata for the currently-playing track

templates/parts.tmpl

@@ -9,7 +9,7 @@
     <ol id="playlist">
         {{range $i, $el := .}}
         <li{{if eq $i 0}} class="active"{{end}}>
-            <a class="track" href="{{$el.Filename}}">{{$el.Artist}} - {{$el.Title}}</a>
+            <a class="track" href="{{$el.Filename}}" data-artist="{{$el.Artist}}" data-title="{{$el.Title}}">{{$el.Artist}} - {{$el.Title}}</a>
             {{template "track-info" $el}}
         </li>
         {{end}}
@@ -40,6 +40,10 @@
                 current = link.parent().index();
                 play(link, $audio[0]);
             });
+            $audio[0].addEventListener('play', function (e) {
+                var $link = $('li.active > a');
+                setTrackMetadata($link);
+            });
             $audio[0].addEventListener('ended', function (e) {
                 playNext();
             });
@@ -70,6 +74,16 @@
                 play($(link), $audio[0]);
             }
 
+            function setTrackMetadata($link) {
+                if ('mediaSession' in navigator) {
+                    // Set track metadata
+                    navigator.mediaSession.metadata = new MediaMetadata({
+                        title: $link.data('title'),
+                        artist: $link.data('artist'),
+                    });
+                }
+            }
+
             function play($link, $player) {
                 $player.src = $link.attr('href');
                 par = $link.parent();
@@ -77,6 +91,12 @@
                 $player.load();
                 $player.play();
             }
+
+            if ('mediaSession' in navigator) {
+                // Listen for MediaSession events
+                navigator.mediaSession.setActionHandler('nexttrack', playNext);
+                navigator.mediaSession.setActionHandler('previoustrack', playPrev);
+            }
         });
 	</script>
 {{end}}