Playback events are not triggered by media session API

[humbkr]

Describe the bug
Chrome and other browsers now ship with a feature to control media directly from the browser using the media session API:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API
https://techcrunch.com/2020/01/16/chrome-gets-global-media-controls

Problem: when using the Chrome media controls, the playback events like play, pause, ... are not triggered, ie isPlaying is not updated, resulting in an out of sync UI.

To Reproduce
Steps to reproduce the behavior:

1. Using Chrome, start playing an audio file via an html button
2. Use the browser media controls to pause the playback
3. The audio is paused but the isPlaying variable is not updated

Expected behavior
The useAudioPlayer() state reflects the state of the audio playback.

Environment (please complete the following information):

• Browser/ browser version: Chrome
• Library version: 0.0.18
• React version: 16.3.1
• Node version: 10.15.0

Related issue: goldfire/howler.js#1262

[joeyiny]

+1, lmk if I can help with this @E-Kuerschner

[E-Kuerschner]

@joeyiny I have something working locally! Hoping to get a release out this week cc @humbkr

[E-Kuerschner]

@joeyiny sorry for the delay! I still have a branch open for this but i ran into some difficulties with the global version of the hook. Will keep posting updates here

[joeyiny]

@E-Kuerschner got it, let me know if i can help

[E-Kuerschner]

hey @joeyiny, @humbkr are you able to use the media session if you create the sound with html5 set to true?

const { load } = useAudioPlayer()

load({
  src: '/myFile.mp3',
  html5: true
})

After doing some research it appears that the media notification will only be set if an audio or video element is present on the page.

see: https://stackoverflow.com/questions/52226454/media-notifications-using-the-media-session-web-api-doesnt-work-with-web-audio

[E-Kuerschner]

pausing work on this for the time being since the Media Session Notification feature will not work with the Web Audio Api which is the default mode of operation for Howler. In order to integrate with the MediaSession the Howl needs to be created with the html5 option set to true.

[vdyalex]

This issue is reported in StackOverflow:
https://stackoverflow.com/questions/73993512/web-audio-player-ios-next-song-previous-song-buttons-are-not-in-control-cent

It's been fixed by setting the action handlers. It doesn't relate to the library itself.

const player = useAudioPlayerContext();

// Then use 

useEffect(() => {
  window.navigator.mediaSession.setActionHandler("play", () => player.play());
  window.navigator.mediaSession.setActionHandler("pause", () => player.pause());
  window.navigator.mediaSession.setActionHandler("stop", () => player.pause());
  
  window.navigator.mediaSession.setActionHandler("previoustrack", () => {
    // your logic to play the previous track
  });
  window.navigator.mediaSession.setActionHandler("nexttrack", () => {
    // your logic to play the next track
  });

  return () => {
    // Setting null to clean those handlers
    ["play", "pause", "stop", "previoustrack", "nexttrack"].forEach((handler) => {
      window.navigator.mediaSession.setActionHandler(handler, null);
    });
  };
}, []);