如何用JavaScript让Chrome检测播放歌曲并在专属音视频管理区管理（含封面等信息）

要让Chrome识别标签页中的播放歌曲并在专属媒体管理区展示信息、提供控制，核心是使用Media Session API——这是Chrome原生支持的API，专门用于对接系统级媒体控制（包括Chrome顶部的播放控件、系统通知栏媒体控制）。

实现步骤 #

1. 定位页面中的媒体元素

首先获取页面里的<audio>（或<video>）元素，这是基础：

const audioElement = document.querySelector('audio');
// 如果是动态创建的音频，确保元素加载完成后再执行后续代码

2. 设置媒体元数据（封面、标题、作者）

通过navigator.mediaSession.metadata设置歌曲的核心信息，Chrome的媒体管理区会自动读取这些数据展示：

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: '歌曲标题',
    artist: '歌手/作者',
    artwork: [
      { src: 'https://example.com/cover-192x192.jpg', sizes: '192x192', type: 'image/jpeg' },
      { src: 'https://example.com/cover-512x512.jpg', sizes: '512x512', type: 'image/jpeg' }
      // 建议提供多尺寸封面，适配不同设备/控件大小
    ]
  });
}

注意：封面图片必须是HTTPS链接（本地开发用localhost除外），否则Chrome可能无法加载。

3. 绑定媒体控制事件

Chrome的媒体管理区会提供播放、暂停、上一曲、下一曲等按钮，需要为这些按钮绑定对应的逻辑：

if ('mediaSession' in navigator) {
  // 播放/暂停
  navigator.mediaSession.setActionHandler('play', () => {
    audioElement.play();
  });
  navigator.mediaSession.setActionHandler('pause', () => {
    audioElement.pause();
  });

  // 上一曲/下一曲（根据你的业务逻辑实现）
  navigator.mediaSession.setActionHandler('previoustrack', () => {
    // 切换到上一曲的逻辑
  });
  navigator.mediaSession.setActionHandler('nexttrack', () => {
    // 切换到下一曲的逻辑
  });
}

4. 同步播放状态到Media Session

监听音频元素的播放/暂停事件，更新Media Session的播放状态，确保Chrome控件显示正确的状态：

audioElement.addEventListener('play', () => {
  if ('mediaSession' in navigator) {
    navigator.mediaSession.playbackState = 'playing';
  }
});

audioElement.addEventListener('pause', () => {
  if ('mediaSession' in navigator) {
    navigator.mediaSession.playbackState = 'paused';
  }
});

特殊场景处理 #

如果你的页面没有使用<audio>元素，而是用Web Audio API播放音频，需要手动模拟播放状态：

• 调用navigator.mediaSession.playbackState手动设置playing/paused
• 同样需要设置metadata和绑定控制事件，逻辑和上面一致

兼容性说明 #

Media Session API从Chrome 73开始支持，基本覆盖了现代Chrome版本，不需要额外的polyfill。

内容的提问来源于stack exchange，提问作者Michael Ranucci