給用戶控制：媒體會話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中文網其他相關文章！