媒体会话

有限可用性

此功能不是基线功能，因为它在一些最广泛使用的浏览器中无法使用。

MediaSession 接口是 媒体会话 API 的一部分，允许网页为标准媒体播放交互提供自定义行为，并报告元数据，这些元数据可以被用户代理发送到设备或操作系统，以便在标准化的用户界面元素中呈现。

例如，智能手机可能在其锁定屏幕中有一个标准面板，提供媒体播放控制和信息显示。设备上的浏览器可以使用 MediaSession 使浏览器播放能够从该标准/全局用户界面进行控制。

实例属性

元数据

返回 MediaMetadata 的实例，其中包含用于在平台 UI 中显示的丰富媒体元数据。

播放状态

指示当前媒体会话是否正在播放。有效值为 none、paused 或 playing。

实例方法

setActionHandler()

为媒体会话操作（如播放或暂停）设置操作处理程序。

setCameraActive()

指示用户代理用户的摄像头是否被认为是活动的。

setMicrophoneActive()

指示用户代理用户的麦克风是否被认为是当前静音的。

setPositionState()

设置当前正在呈现的媒体的当前播放位置和速度。

示例

为音乐播放器设置操作处理程序

以下示例创建一个新的媒体会话，并为其分配操作处理程序

js
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", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("pause", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("stop", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("seekbackward", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("seekforward", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("seekto", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("previoustrack", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("nexttrack", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("skipad", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("togglecamera", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("togglemicrophone", () => {
    /* Code excerpted. */
  });
  navigator.mediaSession.setActionHandler("hangup", () => {
    /* Code excerpted. */
  });
}

以下示例设置了两个用于播放和暂停的函数，然后将它们用作相关操作处理程序的回调函数。

js
const actionHandlers = [
  // play
  [
    "play",
    async () => {
      // play our audio
      await audioEl.play();
      // set playback state
      navigator.mediaSession.playbackState = "playing";
      // update our status element
      updateStatus(allMeta[index], "Action: play  |  Track is playing…");
    },
  ],
  [
    "pause",
    () => {
      // pause out audio
      audioEl.pause();
      // set playback state
      navigator.mediaSession.playbackState = "paused";
      // update our status element
      updateStatus(allMeta[index], "Action: pause  |  Track has been paused…");
    },
  ],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

使用操作处理程序控制幻灯片演示

"previousslide" 和 "nextslide" 操作处理程序可用于处理在幻灯片演示中向前和向后移动，例如当用户将演示放入 画中画 窗口中时，以及按下浏览器提供的控件来浏览幻灯片。

js
try {
  navigator.mediaSession.setActionHandler("previousslide", () => {
    log('> User clicked "Previous Slide" icon.');
    if (slideNumber > 1) slideNumber--;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "previousslide" media session action is not supported.');
}

try {
  navigator.mediaSession.setActionHandler("nextslide", () => {
    log('> User clicked "Next Slide" icon.');
    slideNumber++;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "nextslide" media session action is not supported.');
}

请参阅 演示幻灯片 / 媒体会话示例 以了解工作示例。

规范

规范
媒体会话
# the-mediasession-interface

浏览器兼容性

BCD 表只在启用 JavaScript 的浏览器中加载。