Search code examples
javascriptnode.jsmedia-player

Set media playback controler data

How can I customize the currently playing song's title, artist and album cover for the media overlay in my Electron app?

Image of current Windows 10 media playback overlay mage of current Windows 10 media playback overlay

Solution

  • Alright I just looked back at my own question and googled a bit more and came across the Media Session API and was able to figure it out.

    navigator.mediaSession.metadata = new MediaMetadata({
  title: 'Unforgettable',
  artist: 'Nat King Cole',
  album: 'The Ultimate Collection (Remastered)',
  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' },
  ]
});

    Example code from the MDN

    Important thing to note: There has to be a or tag somewhere in the code.

    Here is a working jsfiddle example: https://jsfiddle.net/2npwy3br/6/