Search code examples
javascripthtmlmedia-player

How do I set the album art and or title of currently playing media In JavaScript?

I've noticed that on various platforms, YouTube Music (& YouTube) on the web has the ability to display (in general, show) the album art, title, and artist outside of the browser, now to be referenced as "Player Dialog"

Chrome OS (Chrome) can do it in something called Media controls, located in the taskbar:

Chrome OS's Media controls displaying title and album art of a song on YouTube Music

Android (Samsung Internet) does it in the notification area. (Samsung Dex, used to try to show the title and notification at the same time, to see if the titles are synced, but no, the song title is in fact separate from the document title, Never Gonna Give You Up - YouTube Music): enter image description here

I know iOS does it as well, but I don't remember the specifics, it's been a while.

So... the thing:

I wanted to do it too. I looked in DevTools, and snook around in the YouTube APIs, and DevTools tells me that YouTube Music renders its content using an image of the album art and playing the audio separately, so that doesn't help (skip the next paragraph).

I saw that ads and music videos showed up in the Player Dialog as well as normal music from YouTube Music. so then...

I created my own little test website that lets you upload audio/video and plays it.

Videos and audios show up in the Player Dialog, but neither the title nor image nor artist show up.

()From where? for audios, (MP3) From the ID3 Metadata. None of the Metadata works. for videos, it would only be the album art taken as a screenshot from some random frame of the video. Still doesn't work

Unfortunately, no one on Google knows what I speak of, and AI is still as dumb as it gets. I can't do anything programmatically because I don't know how.

Solution

  • So.......................................................................................................................................................................... (sigh) navigator.mediaSession. that's it. I had to look up media controls javascript on Google, click on this SO answer and look up navigator.mediaSession on MDN.

    specifically, navigator.mediaSession.metadata, which holds the song name, artist, album art, and album name. you set it using the MediaMetadata constructor like so:

    navigator.mediaSession.metadata = new MediaMetadata({
    title: "Name",//the title of the media
    artist: "Artist",//the artist of the media
    album: "Album Name",//the album name of the media
    artwork: [{ src: "https://dummyimage.com/512/000000/ffffff&text=Album%20Art" }],//the album art associated with the media
  });

    And it works perfectly, as long as *something* is playing, unless it's on a StackOverflow live HTML+JS+CSS snippet.

    Hopefully this helps someone with the unhelpful broader terms they (& I) use on Google or Stack Overflow, which lead to absolute squat.