Electron - Passing program information to windows media volume control overlay

Question

I'm building a music player and I want to give windows information like the current song's title and artist, and the album art in the popup in the attached picture. It currently display's the song name by changing the <title/> of the page.

Using Electron, HTML, and JavaScript, is this possible?

(Please ask if you need to see any code, I'm not sure what'd be helpful and what would just clutter the question so just ask)

assigned vars are:

songName - songs name,
albumName - albums name,
artistName - artists name,
res - album art,
lyrics - songs lyrics

user_11357508 · Answer

Yes, this is posible. You can do this using Media Session API.

Media Session API allows a web page to provide custom behaviors for standard media playback interactions, and to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements. Plus, you can take control about play, pause, previous track and next track buttons.

You can read more about it in next link: https://developer.mozilla.org/en-US/docs/Web/API/MediaSession

This is a little example:

var trackElement = document.getElementById("track_el");

// Make sure browser has Media Session API available
if ('mediaSession' in navigator) {

  // Access to Media Session API
  var ms = navigator.mediaSession;

  // Create track info JSON variable
  var trackInfo = {};

  // Set track title
  trackInfo.title = "Polaris";

  // Set artist name
  trackInfo.artist = "Downtown Binary & The Present Sound";

  // Set album name
  trackInfo.album = "Umbra";
  
  // Set album art (NOTE: image files must be hosted in "http" or "https" protocol to be shown)
  trackInfo.artwork = [
      { src: 'https://antonyhr.neocities.org/temp/polaris/polaris_album_art_96.jpg', sizes: '96x96', type: 'image/jpg' },
      { src: 'https://antonyhr.neocities.org/temp/polaris/polaris_album_art_128.jpg', sizes: '128x128', type: 'image/jpg' },
      { src: 'https://antonyhr.neocities.org/temp/polaris/polaris_album_art_192.jpg', sizes: '192x192', type: 'image/jpg' },
      { src: 'https://antonyhr.neocities.org/temp/polaris/polaris_album_art_256.jpg', sizes: '256x256', type: 'image/jpg' },
      { src: 'https://antonyhr.neocities.org/temp/polaris/polaris_album_art_384.jpg', sizes: '384x384', type: 'image/jpg' },
      { src: 'https://antonyhr.neocities.org/temp/polaris/polaris_album_art_512.jpg', sizes: '512x512', type: 'image/jpg' }
    ];

    // Then, we create a new MediaMetadata and pass our trackInfo JSON variable
    var mediaMD = new MediaMetadata(trackInfo);

    // We assign our mediaMD to MediaSession.metadata property
    ms.metadata = mediaMD

    // And that will be all for show our custom track info in Windows (or any supported) Media Player Pop-Up
    
    // If we need to customize Media controls, we must set action handlers (NOTE: It's not necessary to add all action handlers).
    ms.setActionHandler('play', function() {
    trackElement.play();
      var trackInfoEl = document.getElementById("track_info_el");
      trackInfoEl.textContent = "Track is playing.";
    });
    ms.setActionHandler('pause', function() {
      trackElement.pause();
      var trackInfoEl = document.getElementById("track_info_el");
      trackInfoEl.textContent = "Track is paused.";
    });
    ms.setActionHandler('stop', function() { /* Code excerpted. */ });
    ms.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
    ms.setActionHandler('seekforward', function() { /* Code excerpted. */ });
    ms.setActionHandler('seekto', function() { /* Code excerpted. */ });
    ms.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
    ms.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
} else {
  console.warn("Your browser doesn't have Media Session API");
}

body {background: #181818;}
p {color: #fff; font-family: "Verdana", "Roboto", "Century Gothic";}


Track is playing.
Once audio is playing, see Media Player Pop-Up.

I'm not pretty sure how you can add Lyrics to Media Player Pop-Up, but I think everything else is covered ✅.

If this answer was helpful, please, don't doubt to vote up.

Have a nice coding :D

Electron - Passing program information to windows media volume control overlay

1 Answers