Is there a way to set audio information (title, album, artist) for HTML5 audio on browser

Question

I'm working on a PWA built with Vue for personal use which basically performs the same function as YouTube Music, without the need to pay money for it each month.

I set up a server with a REST API which can search YouTube based on a query, and then it returns a url for an audio-only stream of that video to the client. It is then defined as the src attribute on an <audio> tag.

Playback works great, but I intend to use this over Bluetooth in my car, and I noticed that the information that displays on my car's tablet is just information about the application. For example, if I play some music, I see the following:

• App Name
• Local IP Address
• Unknown Artist
• No Album Art

When typically the information would display as:

• Song Title
• Album Name
• Artist Name
• Album Art

Since this is a PWA, when music is playing on my phone, I get a small audio player notification that appears. I believe if I can figure out how to edit the values on that player, I should be able to achieve what I'm trying to do. Is there some way to set those values?

Here's what that notification looks like: https://i.imgur.com/xazil7Y.png

Answer 1

I managed to find an answer in the Media Session API.

This example that is provided is basically exactly what I was looking for.

if ('mediaSession' in navigator) {

  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    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' },
    ]
  });
}

Now when the audio player notification appears, it displays the correct title, artist, album, and album artwork. It works just like the player notification for Google Play Music, YouTube Music, or Spotify would now.