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

背景与价值在移动与桌面平台，系统媒体控件（锁屏/通知/控制中心）提升播放体验与控制一致性。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 操作准确；恢复时状态一致。应用场景音乐/播客/视频播放、语言学习、新闻音频摘要与合成语音控制。