---

title: Media Session API 媒体控件与系统集成：元数据、动作与可访问性实践

tags: [Media Session API, 媒体控制, 系统集成, navigator.mediaSession, 播放动作]

description: 使用 Media Session API 与系统媒体控件集成，设置元数据、封面与动作处理，提升跨设备播放体验，并提供验证指标与无障碍治理。

categories:

• 应用软件
• 编程开发

---

背景与价值

• 在移动与桌面平台，系统媒体控件（锁屏/通知/控制中心）提升播放体验与控制一致性。
• Media Session API 可设置媒体元数据与处理播放/暂停/下一首等动作。

设置元数据与封面

function setMeta() {
  (navigator as any).mediaSession.metadata = new (window as any).MediaMetadata({
    title: '示例歌曲',
    artist: '示例艺术家',
    album: '示例专辑',
    artwork: [
      { src: '/art/96.png', sizes: '96x96', type: 'image/png' },
      { src: '/art/192.png', sizes: '192x192', type: 'image/png' }
    ]
  });
}

动作处理

function bindActions(audio: HTMLAudioElement) {
  (navigator as any).mediaSession.setActionHandler('play', () => audio.play());
  (navigator as any).mediaSession.setActionHandler('pause', () => audio.pause());
  (navigator as any).mediaSession.setActionHandler('stop', () => { audio.pause(); audio.currentTime = 0; });
  (navigator as any).mediaSession.setActionHandler('seekbackward', (details: any) => { audio.currentTime = Math.max(0, audio.currentTime - (details.seekOffset || 10)); });
  (navigator as any).mediaSession.setActionHandler('seekforward', (details: any) => { audio.currentTime = Math.min(audio.duration, audio.currentTime + (details.seekOffset || 10)); });
  (navigator as any).mediaSession.setActionHandler('seekto', (details: any) => { audio.currentTime = details.seekTime; });
  (navigator as any).mediaSession.setActionHandler('nexttrack', () => next());
  (navigator as any).mediaSession.setActionHandler('previoustrack', () => prev());
}

通知与锁屏体验

• PWA 安装后在 Android 上可显示锁屏与通知控件；确保封面尺寸与格式合规。
• 在 iOS/Safari，支持程度随版本变化；保持基本播放控件统一。

验证指标（Chrome 128/Android/iOS 17）

• 控件响应（P95）：动作到效果 ≤ 120ms。
• 元数据显示成功率：≥ 99%（封面与信息正确显示）。
• 使用频率：控制中心交互占比 ≥ 30%（音乐/播客场景）。

无障碍与治理

• 提供可读标签与清晰标题；快捷键与键盘可达性保持一致。
• 监听错误与播放状态，避免无响应控件；提供错误提示与回退操作。

测试清单

• 锁屏与通知：封面与标题正确显示，动作处理无异常。
• 多曲目切换：前后曲与 seek 操作准确；恢复时状态一致。

应用场景

• 音乐/播客/视频播放、语言学习、新闻音频摘要与合成语音控制。