HTML5 Audio: Native Audio Controls not showing up on Android


I’m using HTML5 Audio in my Capacitor App to play music. On iOS, the native Audio controls are showing up, like you see in this screenshot.
Sadly, it doesn’t show up on Android. Surprisingly, it shows up if I open my Ionic/Capacitor App in the browser and press play. See the Web-App:

This is my Code:

const player = new Audio();

player.src = '';

player.onplay = () => {
  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: 'Lorem Ipsum',
      artist: 'Lorem Ipsum',
      album: 'Lorem Ipsum',
      artwork: [
        { src: '', sizes: '96x96', type: 'image/png' },
        { src: '', sizes: '128x128', type: 'image/png' },
        { src: '', sizes: '192x192', type: 'image/png' },
        { src: '', sizes: '256x256', type: 'image/png' },
        { src: '', sizes: '384x384', type: 'image/png' },
        { src: '', sizes: '512x512', type: 'image/png' },
    console.log('init mediaSession metadata');
  } else {
    console.log('mediaSession not available');

So it works in the system browser, but not in .apk built by capacitor. On the iOS App aren’t any problems. Everything works fine.
Github repository:

Any ideas how to get it working on the android capacitor project?


I saw this on the past, searching for cordova alternatives.
May be depends on the Webview version that you are using.

" To answer your question, Navigator.mediaSession don’t work in cordova as Android webview don’t support them. You can find more info on this under the browser compatibility section of Navigator API Infact, mediaSession itself is in experimental mode as of now."

Created a capacitor community plugin proposal