Audio Meta data in iPhone lockscreen

Need help Mobile
1

Hey, Im doing an app with a music player. My problem is that the meta data from this simple music player isn’t showing up in apples player while playing. I dropped it in an html element on the page.

HTML5 Audio Player with Metadata

Title: Example Title

Artist: Example Artist

Album: Example Album

3

Blockquote

<div>
  <!-- Das Audio-Element wird hier erstellt -->
</div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // URL der hochgeladenen Datei in Bubble.io
    const audioUrl = 'URL_DEINER_MP3_DATEI';  // Ersetze dies durch die URL deiner MP3-Datei

    // Erstellen und Einfügen des Audio-Elements
    const audio = new Audio(audioUrl);
    audio.controls = true;
    document.body.appendChild(audio);

    // Metadaten für den Audio-Player setzen
    const title = 'Beispiel Titel';  // Titel des Songs
    const artist = 'Beispiel Künstler';  // Name des Künstlers
    const album = 'Beispiel Album';  // Name des Albums
    const artworkUrl = 'URL_DEINES_ALBUMCOVERS';  // URL des Albumcovers

    // Überprüfen, ob die MediaSession API unterstützt wird
    if ('mediaSession' in navigator) {
      navigator.mediaSession.metadata = new MediaMetadata({
        title: title,
        artist: artist,
        album: album,
        artwork: [
          { src: artworkUrl, sizes: '96x96', type: 'image/png' },
          { src: artworkUrl, sizes: '128x128', type: 'image/png' },
          { src: artworkUrl, sizes: '192x192', type: 'image/png' },
          { src: artworkUrl, sizes: '256x256', type: 'image/png' },
          { src: artworkUrl, sizes: '384x384', type: 'image/png' },
          { src: artworkUrl, sizes: '512x512', type: 'image/png' }
        ]
      });

      // Definieren der Media-Session-Aktions-Handler
      navigator.mediaSession.setActionHandler('play', function() { audio.play(); });
      navigator.mediaSession.setActionHandler('pause', function() { audio.pause(); });
      // Hier können weitere Aktionen wie 'seekbackward', 'seekforward', 'previoustrack', 'nexttrack' hinzugefügt werden
    }
  });
</script>