给用户控制：媒体会话API

想象一下：杀手肯德里克·拉马尔（Kendrick Lamar）的曲目从您的许多浏览器选项卡中之一爆炸。您正在开槽，但有人进入，您需要暂停它。哪个标签？浏览器提供有限的帮助；您可能会静音所有音频，但直接控制不会更好？

媒体会议API解决了这一点。它将媒体播放控件扩展到播放选项卡之外，从而通过以下方式提供访问

• 移动设备通知区域
• 可穿戴设备
• 桌面媒体枢纽

此外，它可以使用媒体键和语音助手（Siri，Google Assistant，Bixby，Alexa）进行控制。

了解媒体会话API

API以两个接口为中心：

• MediaMetadata ：提供媒体详细信息（标题，专辑，艺术品，艺术家 - 肯德里克·拉马尔（Kendrick Lamar），在我们的示例中）。
• MediaSession ：管理播放功能。

在实施之前，请始终检查浏览器支持：

如果（导航器中的'MediaSession'）{
  //媒体会话API代码在此处
}

MediaMetadata接口

MediaMetadata.MediaMetadata()创建一个MediaMetadata对象。关键属性包括：

• MediaMetadata.title ：媒体标题。
• MediaMetadata.artist ：艺术家或团体。
• MediaMetadata.album ：专辑名称。
• MediaMetadata.artwork ： MediaImage对象的数组（图像URL，大小，MIME类型）。

肯德里克·拉马尔（Kendrick Lamar）的“好”的示例：

如果（导航器中的'MediaSession'）{
  navigator.mediasession.metadata =新的MediaMetadata（{
    标题：“好”，
    艺术家：'肯德里克·拉马尔（Kendrick Lamar），
    专辑：“到皮条客蝴蝶”，
    艺术品： [
      {src：'https：// mytechnicalArticle/kendrick-lamar/to-pimp-a-butterfly/alright/alright/96x96'，尺寸：'96x96'，类型：'image/png'}，
      {src：'https：// mytechnicalArticle/kendrick-lamar/to-pimp-a-butterfly/alright/alright/allight/128x128'，尺寸：'128x128'，类型：'image/png'}，
      //添加更多尺寸（192x192，256x256等）
    这是给出的
  }）;
}

MediaSession界面

该界面提供用户播放控件：

• play() ：开始播放。
• pause() ：暂停播放。
• previoustrack() ：播放上一首曲目。
• nexttrack() ：播放下一首曲目。
• seekbackward() ：向后寻求（通过指定的偏移）。
• seekforward() ：寻求向前。
• seekto() ：寻求特定时间。
• stop() ：停止播放。
• skipad() ：跳过广告（此处省略了以简短的实现详细信息）。

setActionHandler()为这些动作注册处理程序。播放/暂停的示例：

让Alright = new Audio（）; //使用音频而不是htmlaudiolement

如果（导航器中的'MediaSession'）{
  navigator.mediasession.setActionHandler（'play'，（）=> alright.play（））;
  navigator.mediasession.setactionhandler（'pape'，（）=> alright.pape（））;
}

previoustrack ， nexttrack ， seekbackward ，Seekforward， seekforward和seekto和Stop和stop中实施了类似的处理程序。如果details.seekOffset seekbackward seekforward默认的10秒偏移。 seekto处理标准和快速寻求。 stop处理程序停止并重置播放时间。

请记住，在每个操作之后，使用setPositionState()更新播放状态：

如果（导航器中的'MediaSession'）{
  navigator.mediasession.setpositionstate（{
    持续时间：好的。
    ploplackrate：Alright.playbackrate，
    位置：Alright.CurrentTime
  }）;
}

错误处理至关重要； Wrap setActionHandler try...catch块优雅地处理不受支持的动作。

原始文章中提供了一个完整的示例，其中包含错误处理和状态更新。切记用实际的URL替换占位符图像URL。该演示在各种设备和平台上展示了​​API的功能。考虑在您的媒体丰富的应用程序中实现此API，以增强用户体验。

以上是给用户控制：媒体会话API的详细内容。更多信息请关注PHP中文网其他相关文章！