谷歌浏览器如何配置媒体会话API控制锁屏播放_谷歌浏览器Media_Session原生集成步骤

必须在用户手势触发后立即绑定媒体元素、设置元数据并注册动作处理器，否则系统静默忽略；需确认mediaSession支持、使用真实加载完成的audio/video元素、HTTPS封面图、严格按顺序执行setActionHandler及setPositionState同步。

要在谷歌浏览器中让网页音乐在锁屏界面显示标题、艺术家和控制按钮，并响应播放/暂停/上一首/下一首操作，必须在用户点击等手势触发后立即绑定媒体元素、设置元数据并注册动作处理器，否则系统会静默忽略全部配置。

确认浏览器支持并绑定媒体元素

打开开发者工具控制台，输入 if ('mediaSession' in navigator) { console.log('支持') }，确认返回“支持”；不支持时该 API 在 Chrome 57+ 默认启用，但需确保未启用“禁用媒体会话”实验性标志（chrome://flags/#disable-media-session）。

找到页面中已存在的 <audio> 或 <video> 元素，例如 const audio = document.querySelector('#bgm')；【必须使用真实加载完成的媒体元素，不能是 new Audio() 后未调用 play() 的实例】。

在用户点击播放按钮的事件处理函数内执行后续步骤——这是硬性前提，脱离用户手势的 setActionHandler 调用会被浏览器直接丢弃。

设置锁屏显示的元数据

调用 navigator.mediaSession.metadata = new MediaMetadata({，填入 title、artist、album 字段，全部为纯字符串，不支持 HTML 标签或换行符。

artwork 字段必须传入 HTTPS 协议的图片数组，至少包含一个 ≥512×512 像素的封面图对象，例如：{ src: 'https://example.com/cover-512.jpg', sizes: '512x512', type: 'image/jpeg' }；【本地 file:// 协议或 HTTP 地址会导致封面完全不显示，Android 系统将降级为默认图标】。

设置完成后不会立即刷新锁屏界面——需触发一次播放状态变化（如先 play 再 pause 再 play），或等待系统轮询（延迟不可控），因此建议紧接在 audio.play() 调用之后赋值。

注册系统级播放控制动作

方法一：基础控制（全平台兼容）
依次执行：
navigator.mediaSession.setActionHandler('play', () => audio.play().catch(e => console.warn(e)));
navigator.mediaSession.setActionHandler('pause', () => audio.pause());
navigator.mediaSession.setActionHandler('previoustrack', () => { audio.currentTime = Math.max(0, audio.currentTime - 15); audio.play(); });
navigator.mediaSession.setActionHandler('nexttrack', () => { audio.currentTime = Math.min(audio.duration, audio.currentTime + 15); audio.play(); });

方法二：安卓 Chrome 117+ 进阶跳转
仅当检测到 navigator.userAgent.includes('Chrome/117') && /Android/.test(navigator.userAgent) 时，额外注册：
navigator.mediaSession.setActionHandler('seekto', event => { audio.currentTime = event.seekTime; });
注意：此 handler 触发后必须立刻调用 navigator.mediaSession.setPositionState() 同步进度，否则锁屏进度条不动。

主动同步播放进度到锁屏界面

第一步：监听音频加载完成事件，在 audio.addEventListener('loadedmetadata', () => { ... }) 内首次调用 navigator.mediaSession.setPositionState()，传入 { duration: audio.duration, position: 0, playbackRate: 1.0 }。

第二步：使用 requestAnimationFrame 循环更新（比 setInterval 更精准）：
定义函数 function updatePosition() { if (!audio.paused) { navigator.mediaSession.setPositionState({ duration: audio.duration || 0, position: audio.currentTime, playbackRate: audio.playbackRate }); } requestAnimationFrame(updatePosition); }
在 audio.addEventListener('play', updatePosition) 中启动循环。

第三步：每次播放状态变更（play/pause）后，手动触发一次 navigator.mediaSession.playbackState = audio.paused ? 'paused' : 'playing'；这一步漏掉会导致锁屏按钮状态不同步，比如实际在播但显示暂停图标。