media session api 实现网页媒体的系统级控制，需设置 metadata（含 title、artist 等）、注册 action handler（如 play/pause/seekto）、同步 playbackstate，并处理后台播放兼容性问题。
media session api 让网页能向浏览器暴露媒体播放信息，并响应系统级的播放控制（如键盘媒体键、通知栏控件、ios 控制中心、android 媒体通知等），实现真正的“系统级”媒体控制体验。
启用 Media Session 并设置基础元数据
在播放开始前，需通过 navigator.mediaSession 设置标题、艺术家、专辑、封面图等元数据，否则系统控件可能不显示或显示不全：
- 调用
mediaSession.metadata赋值new MediaMetadata({...})，其中title和artist是最简必需字段； -
artwork数组应包含多个尺寸的{src, sizes, type}图片（推荐至少 96×96、192×192、512×512）； - 若未设置，部分平台（如 iOS）会禁用播放/暂停按钮，或仅显示默认图标。
注册播放控制事件监听器
系统控件触发的操作会派发为 mediaSession 的事件，需主动监听并执行对应逻辑：
setActionHandler('play', () => audio.play())setActionHandler('pause', () => audio.pause())setActionHandler('seekto', e => audio.currentTime = e.seekTime)setActionHandler('previoustrack', () => playPrev())setActionHandler('nexttrack', () => playNext())
注意：未注册 handler 的操作，系统控件按钮将自动置灰不可用；seekto 在 Chrome 88+ 支持，但需同时设置 audio.fastSeek = true 才能精准跳转。
同步播放状态与 playbackState
浏览器会根据 mediaSession.playbackState 决定控件图标（播放/暂停态），必须手动同步：
- 播放开始时设为
'playing'，暂停或结束时设为'paused'； - 不要依赖音频元素自身的
paused属性自动更新——必须显式赋值； - 例如：
audio.addEventListener('play', () => mediaSession.playbackState = 'playing')； - 同理监听
pause、ended事件来重置状态。
处理后台播放与生命周期兼容性
移动端或标签页失焦时，部分浏览器会暂停音频，影响 Media Session 行为：
- iOS Safari 默认禁止后台音频播放，需用户首次交互后才能播放，且
mediaSession在后台可能失效； - Android Chrome 允许后台播放，但需确保音频上下文已激活（如由用户点击触发
audio.play()）； - 建议在
visibilitychange事件中检查document.hidden，暂停/恢复时同步更新playbackState和 UI 状态； - 避免在非用户手势上下文中调用
play()，否则会被静音或拒绝。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
