Javascript - Connect HTMLMediaElement to Android playback controls

Javascript – Connect HTMLMediaElement to Android playback controls

Last updated: 2024/02/10 at 1:26 PM

Admin

2 Min Read

Problem:

I have created an HTML audio player in HTML/Javascript for playlists. The playlist is managed internally through a list of media and the ended event automatically plays the next media in line.

Contents

Problem:Solution:

From Android Bromite browser, I can play a media and things behave properly. The Android notifications card shows the media playback controls (previous, next, pause), but only the play/pause works.

How could I connect my next/previous Javascript methods (working fine when called from the player HTML buttons) to Android next/previous playback controls ? The HTMLMediaElement API seems to have a audioTracks property that could do it, but it’s currently supported by only Safari.

Solution:

I found it by accident, looking for picture in picture, on https://googlechrome.github.io/samples/picture-in-picture/audio-playlist

Here is the relevant code :

let playlist = ... // get your playlist as array
let audio = new Audio();
let index = 0;

function switchTrack(index) {
   if(index < 0 && index >= playlist.length) return;

   let track = playlist[index];
   audio.src = track.src;

   // Update Media Session metadata
   navigator.mediaSession.metadata = new MediaMetadata({
      title: track.title,
      artist: track.artist,
      album: track.album,
      artwork: track.artwork
   });
   audio.play();
}

navigator.mediaSession.setActionHandler('previoustrack', function() {
  log('> User clicked "Previous Track" button.');
  switchTrack(index - 1);
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  log('> User clicked "Next Track" button.');
  switchTrack(index + 1);
});