HTML5 Audio: Native Audio Controls not showing up on Android

Capacitor
1

Hello,

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: https://audio-player-sigma.vercel.app

This is my Code:

const player = new Audio();

player.src = 'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_2MG.mp3';

player.onplay = () => {
  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: 'Lorem Ipsum',
      artist: 'Lorem Ipsum',
      album: 'Lorem Ipsum',
      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' },
      ]
    });
    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: https://github.com/mariusbolik/capacitor-audio-player

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

2

Hi,

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."

3

Created a capacitor community plugin proposal

4

Are there any news on this? I’m running into the same problem and going crazy. I also can’t find other solutions for Cap4 and media controls.

5

Currently we are using this one:

You can see discussion here:

6

This plugin is the final solution to display media controls on Android: