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

--- title: Media Session API：锁屏控制与元数据 keywords: - Media Session - setActionHandler - metadata - 锁屏控制 - 通知 description: 说明 Media Session 的元数据设置与操作处理，启用系统级锁屏控制与通知面板按钮，提升播放体验并提供示例与参考。 categories: - 应用软件 - 编程开发 --- 概述 Media Session 允许网页设置媒体元数据并处理系统控制事件（播放/暂停/上一首/下一首/跳转），在移动端或桌面实现更一致的系统级体验。 示例 ```js 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/