Electron - 将程序信息传递给 Windows 媒体音量控制覆盖

Question

我正在构建一个音乐播放器，我想在窗口中提供当前歌曲的标题和艺术家，以及附件图片中弹出窗口中的专辑封面等信息。目前通过更改页面的<title/>来显示歌曲名称。

使用 Electron、HTML 和 JavaScript，这可能吗？

（请询问您是否需要查看任何代码，我不确定什么会有所帮助，什么会使问题变得混乱，所以请询问）

分配的变量是：

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

Answer 1

是的，这是可能的。 您可以使用Media Session API 执行此操作。

Media Session API 允许网页为标准媒体播放交互提供自定义行为，并报告可由用户代理发送到设备或操作系统以在标准化用户界面元素中呈现的元数据。 此外，您可以控制播放、暂停、上一曲和下一曲按钮。

您可以在下一个链接中阅读有关它的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/MediaSession

这是一个小例子：

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";}

<audio id="track_el" controls autoplay src="https://firebasestorage.googleapis.com/v0/b/tempfiles-2912.appspot.com/o/polaris_clip.mp3?alt=media&token=bcfc245e-dc89-4046-b287-b99046c786bf" type="audio/mp3"></audio>
<p id="track_info_el">Track is playing.</p>
<p>Once audio is playing, see Media Player Pop-Up.</p>

我不太确定如何将歌词添加到媒体播放器弹出窗口，但我认为其他所有内容都已涵盖 ✅。

如果这个答案有帮助，请不要怀疑投票。

有一个很好的编码：D