MediaSession info are not being displayed when using Web Audio Api

[Sandakan]

The Problem

When using Howler for playback, it defaults to Web Audio which prevents mediaSession info from being displayed.

But when using the HTML5 Audio, it works as expected.

Reproducible Example

No response

Reproduction Steps

1. Play a song using Howler
2. Update mediaSession info from the audio metadata
3. Link the listeners of the Howl instance to the mediaSession listeners.
4. Try to control the audio playback using media controls on your keyboard.

Possible Solution

The reason for this may be because audio playing from Web Audio API doesn't get audio focus like when playing audio from the audio element in HTML.

This chromium issue may be related to this https://bugs.chromium.org/p/chromium/issues/detail?id=944538&q=mediasession&can=2

https://github.com/w3c/audio-session-detach/issues/10

A possible solution but a bit mess to work with https://stackoverflow.com/a/52406560/11393687

Context

I caught this bug when Howler failed to load a song from an XHR request that was blocked by CSP so Howler falls back to HTML5 audio. (I saw that this is how Howler works in code). When Howler uses HTML5 Audio, mediaSession info is correctly displayed.

But after I fixed the CORS error, it uses the Web Audio API and then the mediaSession info is not being displayed.

Howler.js Version

2.2.3

Affected Browser(s)/Versiuon(s)

Electron (Chrome 112)

[arjunmehta]

I believe this also is an issue on iOS. If I load the audio with html5: true, the media controls in the control center are displayed as expected, including the ability to choose a speaker.

But when using the WebAudio API, controls are not shown, no matter what.