Media Session API：锁屏控制与元数据

---

title: Media Session API：锁屏控制与元数据

keywords:

• Media Session
• setActionHandler
• metadata
• 锁屏控制
• 通知

description: 说明 Media Session 的元数据设置与操作处理，启用系统级锁屏控制与通知面板按钮，提升播放体验并提供示例与参考。

categories:

• 应用软件
• 编程开发

---

概述

Media Session 允许网页设置媒体元数据并处理系统控制事件（播放/暂停/上一首/下一首/跳转），在移动端或桌面实现更一致的系统级体验。

示例

navigator.mediaSession.metadata = new MediaMetadata({
  title: 'Song', artist: 'Artist', album: 'Album', artwork: [{ src: '/cover.png', sizes: '512x512', type: 'image/png' }]
})

navigator.mediaSession.setActionHandler('play', () => player.play())
navigator.mediaSession.setActionHandler('pause', () => player.pause())
navigator.mediaSession.setActionHandler('seekto', e => player.seek(e.seekTime))

工程建议

• 状态同步：与播放器状态一致更新；避免系统按钮与 UI 不一致。
• 资源与功耗：优化封面与通知资源大小；避免频繁更新导致耗电。
• 兼容与回退：特性检测后启用；在不支持平台保持基本播放体验。

参考与验证

• MDN Media Session 文档：https://developer.mozilla.org/docs/Web/API/Media_Session_API
• web.dev 指南：https://web.dev/articles/media-session
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/media-session/