Controls always showing "Ionic app" while playing

[davinci-klod]

Hi,

I’m trying to show some music controls using the MediaSession API. It’s works almost (Mac OS controls bar, Google Chrome) everywhere except on iOS device which is always displaying “Ionic App” while playing. I’m testing this on my real Iphone. The code which I’m using seems to have some effects because while I’m using it, previous and next buttons appears.

Here’s my background modes config :

Here’s my code

import React, { useEffect, useRef, useState } from 'react';
import { IonButton, IonItem, IonLabel } from '@ionic/react';

const MediaPlayer: React.FC = () => {
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);

  // Fonction pour démarrer la lecture de l'audio
  const playAudio = () => {
    if (audioRef.current) {
      audioRef.current.play().then(() => {
        // Mettre à jour les métadonnées après le début de la lecture
        if ('mediaSession' in navigator) {
          navigator.mediaSession.metadata = new MediaMetadata({
            title: 'Track',
            artist: 'Artist',
            album: 'Album'
          });
        }
      });
      setIsPlaying(true);
    }
  };

  // Fonction pour mettre en pause l'audio
  const pauseAudio = () => {
    if (audioRef.current) {
      audioRef.current.pause();
      setIsPlaying(false);
    }
  };

  // Utilisation de l'API Media Session
  useEffect(() => {
    console.log('Initialisation de l\'API Media Session');
    if ('mediaSession' in navigator) {
      navigator.mediaSession.setActionHandler('play', () => {
        playAudio();
      });

      navigator.mediaSession.setActionHandler('pause', () => {
        pauseAudio();
      });
    }
  }, []);

  return (
    <IonItem>
      <IonLabel>Lecteur Audio</IonLabel>
      <audio ref={audioRef} src="/files/pwop.mp3" preload="metadata" />
      {isPlaying ? (
        <IonButton onClick={pauseAudio}>Pause</IonButton>
      ) : (
        <IonButton onClick={playAudio}>Play</IonButton>
      )}
    </IonItem>
  );
};

export default MediaPlayer;

Did you know how I can achieve this please ? Thanks you very much !

[twestrick]

Some quick Googling I came across this SO that points to a a fluke in iOS where in a PWA it will sometimes show the title of the web page instead of what was set in the metadata.

Assuming you’ve verified setting the metadata is actually getting called on the iOS device?

Before you go down the road of an HTML audio player, are you planning on supporting Android too? If so, metadata for WebView Android is not supported. You also won’t be able to support background play on Android as you need to use a foreground service.

You might want to check out the Capacitor audio plugin I created - GitHub - mediagrid/capacitor-native-audio: Play audio in a Capacitor app natively from a URL/web source simultaneously with background audio and background play support.

[davinci-klod]

Hi,

Thank you for your quick response! During my research, I discovered your plugin but I must admit that I have a little difficulty implementing it as a component of my application. Do you have a code example of a component using your plugin so that I can re-adapt mine?

Thanking you very much.

[twestrick]

There is an example app here - capacitor-native-audio/example at main · mediagrid/capacitor-native-audio · GitHub

[liambrown]

Hi @Davinci-klod

As I can see, your code is mostly correct, but the issue on iOS could be due to limitations with how iOS handles the MediaSession API. To fix the “Ionic App” display, try adding a web app manifest to your project with a proper name and short_name. iOS might be using this information for the app name display. Additionally, make sure your metadata includes artwork, as it can help iOS handle the session better:

navigator.mediaSession.metadata = new MediaMetadata({
  title: 'Track',
  artist: 'Artist',
  album: 'Album',
  artwork: [{ src: 'path_to_image', sizes: '96x96', type: 'image/png' }]
});

Thanks