Media Session API - 提供了一种自定义媒体通知的方法

Media Session API 提供了一种自定义媒体通知的方法。它通过提供元数据，让用户代理显示你的 Web 应用正在播放的媒体。

它还提供操作处理程序，浏览器可以使用这些处理程序来访问平台媒体键，例如键盘、耳机、遥控器上的硬件键，以及通知区域和移动设备锁定屏幕上的软件键。因此，即使不查看网页，您也可以通过设备无缝控制网络提供的媒体。

目的是让用户知道正在播放的内容并对其进行控制，而不需要打开启动它的具体页面。为了能够支持媒体会话 API，浏览器首先需要一种机制来访问操作系统级别的媒体控件并受其控制（例如 Firefox 的 MediaControl)。

媒体会话概念和用法

MediaMetadata 接口允许网站为正在播放的媒体的平台 UI 提供丰富的元数据。此元数据包括标题、艺术家（创作者）姓名、专辑（作品）和艺术作品。该平台可以在媒体中心、通知、设备锁屏等中显示这些元数据。

MediaSession 接口允许用户通过用户代理定义的接口元素控制媒体播放。与这些元素的互动会触发网页中的动作处理程序，播放媒体。由于多个页面可能同时使用此 API，因此用户代理负责调用正确页面的操作处理程序。当没有可用的页面定义行为时，用户代理提供默认行为。

访问媒体会话 API

Media Session API 的主要接口是 MediaSession 接口。您无需创建自己的 MediaSession 实例，而是使用 navigator.mediaSession 属性访问 API。例如，将媒体会话的当前状态设置为 playing：

navigator.mediaSession.playbackState = "playing";

接口

• MediaMetadata

允许网页提供富媒体元数据以在平台 UI 中显示。

• MediaSession

允许网页为标准媒体播放交互提供自定义行为。

字典

• MediaImage

MediaImage 对象包含描述与媒体关联的图像的信息。这可能是 CD 或 DVD 封面、电影海报、海报框架等。

• MediaSessionActionDetails

提供执行已请求操作所需的信息，包括要执行的操作类型以及所需的任何其他信息，例如搜索的距离或时间。

实例

以下实例显示了 Media Session API 的功能检测。它为会话实例化一个元数据对象，并为用户控制动作添加动作处理程序：

if ('mediaSession' in navigator) {
  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' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('pause', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('stop', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('seekbackward', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('seekto', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* 一些处理。 */ });
  navigator.mediaSession.setActionHandler('skipad', function() { /* 一些处理。 */ });
}

一些用户代理禁用移动设备上媒体元素的自动播放，并需要用户手势来启动媒体。以下实例将 pointerup 事件添加到页面播放按钮，然后用于启动媒体会话代码：

playButton.addEventListener('pointerup', function(event) {
  var audio = document.querySelector('audio');

  // 用户与页面交互。我们播放音频...
  audio.play()
  .then(_ => { /* 设置媒体会话控件，如上面的代码 */ })
  .catch(error => { console.log(error) });
});

规范

规范	状态	备注
Media Session Standard	草稿	初始定义。

桌面浏览器兼容性

移动浏览器兼容性