Media Session API

To let users know what's currently playing in their browser and control it without returning to the page that launched it, the Media Session API has been introduced:

Hardware media keys are supported.If users press the "next track" media key of their keyboard, web developers can handle this user action whether Chrome is in the foreground or the background.
Media notifications are customized on mobile, Chrome OS, and paired wearable devices.
The media hub is available on the desktop.If users have tabs playing audio, they can easily stop playback from the media hub on a desktop so that web developers have a chance to clear their state.
Lock screen media controls are available on Chrome OS and mobile.If users listen to a podcast on the web while their device screen is locked, they can still hit the "seek backward" icon from the lock screen media controls so that web developers move playback time backward by few seconds.
Picture-in-Picture window controls are available.
Assistant integration on mobile is available.

Play the audio. Then try clicking the pause button on your keyboard.
RESETRUNFULL

<!DOCTYPE html><html><body>
<audio src="/shared/music.mp3" controls/>
<script>
if ('mediaSession' in navigator) {
   navigator.mediaSession.metadata = new MediaMetadata({
      title: 'Unforgettable',
      artist: 'Nat King Cole',
      album: 'The Ultimate Collection (Remastered)',
      artwork: [
        { src: 'https://dummyimage.com/96x96'  , sizes: '96x96',   type: 'image/png' },
        { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
        { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
        { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
        { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
        { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
      ]
   });
   let nm = navigator.mediaSession;
   nm.setActionHandler('play', handler);
   nm.setActionHandler('pause', handler);
   nm.setActionHandler('stop', handler);
   nm.setActionHandler('seekbackward', handler);
   nm.setActionHandler('seekforward', handler);
   nm.setActionHandler('seekto', handler);
   nm.setActionHandler('previoustrack', handler);
   nm.setActionHandler('nexttrack', handler);
}
function handler(details) {
   const audio = document.querySelector("audio");
   switch(details.action) {
      case "play":
         alert("The music is going to be resumed!");
         audio.play();
         break;      
      case "pause":
         alert("The music has been paused!");
         audio.pause();
         break;      
      case "seekforward":
         audio.currentTime = Math.min(audio.currentTime + details.seekOffset, audio.duration);
         break;
      case "seekbackward":
         audio.currentTime = Math.max(audio.currentTime - details.seekOffset, 0);
         break;
   }
   /*
       ......details.fastSeek
       ......details.seekTime
   */
}
</script>
</body></html>

<!DOCTYPE html><html><body>
<audio src="/shared/music.mp3" controls/>
<script>
if ('mediaSession' in navigator) {
   navigator.mediaSession.metadata = new MediaMetadata({
      title: 'Unforgettable',
      artist: 'Nat King Cole',
      album: 'The Ultimate Collection (Remastered)',
      artwork: [
        { src: 'https://dummyimage.com/96x96'  , sizes: '96x96',   type: 'image/png' },
        { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
        { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
        { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
        { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
        { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
      ]
   });
   let nm = navigator.mediaSession;
   nm.setActionHandler('play', handler);
   nm.setActionHandler('pause', handler);
   nm.setActionHandler('stop', handler);
   nm.setActionHandler('seekbackward', handler);
   nm.setActionHandler('seekforward', handler);
   nm.setActionHandler('seekto', handler);
   nm.setActionHandler('previoustrack', handler);
   nm.setActionHandler('nexttrack', handler);
}
function handler(details) {
   const audio = document.querySelector("audio");
   switch(details.action) {
      case "play":
         alert("The music is going to be resumed!");
         audio.play();
         break;      
      case "pause":
         alert("The music has been paused!");
         audio.pause();
         break;      
      case "seekforward":
         audio.currentTime = Math.min(audio.currentTime + details.seekOffset, audio.duration);
         break;
      case "seekbackward":
         audio.currentTime = Math.max(audio.currentTime - details.seekOffset, 0);
         break;
   }
   /*
       ......details.fastSeek
       ......details.seekTime
   */
}
</script>
</body></html>

MENU

Media Session API