implement mediaSession controls for better android integration

index.html

@@ -64,7 +64,7 @@ <h1>Listen to Transformer</h1>
             so we made this app to make it easier to explore and curate the model’s output.
           </p>
 
-          <button class="square" id="btnCloseHelp">start listening</button>
+          <button class="square interact" id="btnCloseHelp">start listening</button>
 
           <p>If you listen to a bunch of samples, you’ll probably discover that most
             compositions (like a lot of  fully AI-generated music)
@@ -127,7 +127,7 @@ <h1 class="outside">
             <button title="go to the previous song" id="btnPrevious" disabled>
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
             </button>
-            <button title="play/pause" id="btnPlay">
+            <button title="play/pause" id="btnPlay" class="interact">
               <svg class="no" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
               <svg class="yes" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
             </button>

script.js

@@ -232,7 +232,6 @@ function changeSong(index, noAutoplay = false) {
   } else {
     document.getElementById('btnPrevious').removeAttribute('disabled');
   }
-
   pausePlayer(true);
   const hash =  MODEL + '_' + allData[index].fileName;
   window.location.hash = hash;
@@ -480,3 +479,44 @@ function sketch(p) {
     p.rect(x, y, w, h);
   }
 };
+
+if (navigator.mediaSession) {
+
+  function playAudio() {
+    var audio = document.createElement('audio');
+    audio.src = './silence.mp3'; // silence must be at least 5 seconds https://freesound.org/people/silentspeaker/sounds/426895/
+
+    // to keep the controls open, must loop the silence
+    audio.addEventListener('ended', function() {
+      this.currentTime = 0;
+      this.play();
+    }, false);
+
+    audio.play().then(_ => {
+      let playing = true;
+      navigator.mediaSession.setActionHandler('play', function() {
+        audio.play()
+      });
+      navigator.mediaSession.setActionHandler('pause', function() {
+        if (playing) {
+          audio.pause()
+          window.pausePlayer()
+        }
+        else {
+          audio.play()
+          window.startPlayer()
+        }
+        playing = !playing
+      });
+      navigator.mediaSession.setActionHandler('nexttrack', function() {
+        window.nextSong()
+        //store.dispatch(next());
+      });
+    }).catch(error => { console.log(error); });
+  }
+  document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.interact').forEach(b => {
+      b.addEventListener('click', playAudio)
+    })
+  })
+}