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

要在谷歌浏览器中让网页音乐在锁屏界面显示标题、艺术家和控制按钮，并响应播放/暂停/上一首/下一首操作，关键就在于，这一切必须在用户的手势触发后立刻执行，否则系统会静默忽略全部配置。

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

先来确认浏览器是否支持。打开开发者工具控制台，输入 if ('mediaSession' in na vigator) { console.log('支持') }，看到“支持”返回就对了。话说这API在Chrome 57+就默认启用了，不过得留个心眼，确认一下 chrome://flags/#disable-media-session 这个实验性标志没有被勾选，否则配置了也白搭。

接下来找到页面里已经存在的 或 元素。比如写个 const audio = document.querySelector('#bgm')。这里有个硬性前提：必须使用真实加载完成、并且已经调用过play()方法的媒体元素。用 new Audio() 创建但没播放的实例，或者还没有加载完成的元素，都不行。

动作要快，在用户点击播放按钮的事件处理函数里，立刻执行后续的所有步骤。这是整套配置的硬性前提——脱离用户手势去调用 setActionHandler，浏览器会直接丢弃，根本不给机会。

设置锁屏显示的元数据

然后给锁屏界面准备显示的内容。调用 na vigator.mediaSession.metadata = new MediaMetadata({，把标题、艺术家、专辑这些字段填进去。注意，全部得是纯字符串，不支持HTML标签或换行符，别想着玩什么花样。

封面图这块容易踩坑。artwork 字段必须传一个图片数组，并且图片地址必须是 HTTPS 协议。本地 file:// 或 http 地址会导致封面完全不显示，Android 系统会直接降级成默认图标。建议至少包含一张 ≥512×512 像素的图片，格式像这样：

{ src: 'https://example.com/cover-512.jpg', sizes: '512x512', type: 'image/jpeg' }

设置完成后，锁屏界面不会立刻刷新。需要触发一次播放状态变化，或者等系统轮询——但轮询的延迟完全不可控。所以最稳妥的做法是：紧跟在 audio.play() 调用之后，立刻赋值元数据。

注册系统级播放控制动作

播放控制分两种情况。先说基础控制，全平台都兼容：

依次注册四个动作：播放、暂停、上一曲、下一曲。
na vigator.mediaSession.setActionHandler('play', () => audio.play().catch(e => console.warn(e)));
na vigator.mediaSession.setActionHandler('pause', () => audio.pause());
na vigator.mediaSession.setActionHandler('previoustrack', () => { audio.currentTime = Math.max(0, audio.currentTime - 15); audio.play(); });
na vigator.mediaSession.setActionHandler('nexttrack', () => { audio.currentTime = Math.min(audio.duration, audio.currentTime + 15); audio.play(); });

如果用户用的是安卓 Chrome 117 及以上版本，还能支持进阶跳转控制。检测到 na vigator.userAgent.includes('Chrome/117') && /Android/.test(na vigator.userAgent) 时，额外注册一个 seekto 动作：

na vigator.mediaSession.setActionHandler('seekto', event => { audio.currentTime = event.seekTime; });

但要注意，这个 handler 触发后，必须立刻调用 na vigator.mediaSession.setPositionState() 同步进度。不然锁屏上的进度条纹丝不动，用户会以为功能坏了。

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

这一步很多人容易忽略。锁屏上的进度条并不会自动跟碎银频播放，需要手动同步。

第一步：监听音频的 loadedmetadata 事件。在回调里首次调用 na vigator.mediaSession.setPositionState()，传入三个参数：{ duration: audio.duration, position: 0, playbackRate: 1.0 }。这样一上来就有个初始状态。

第二步：用 requestAnimationFrame 循环更新进度——这比 setInterval 精准得多。定义一个函数：

function updatePosition() { if (!audio.paused) { na vigator.mediaSession.setPositionState({ duration: audio.duration || 0, position: audio.currentTime, playbackRate: audio.playbackRate }); } requestAnimationFrame(updatePosition); }

然后在 audio.addEventListener('play', updatePosition) 中启动这个循环。音频播放时，进度就会持续同步到锁屏界面。

第三步：每次播放状态变更（播放或暂停）之后，手动触发一次：
na vigator.mediaSession.playbackState = audio.paused ? 'paused' : 'playing'

这一步若漏掉，锁屏上的按钮状态就会不同步。比如实际正在播放，但锁屏上显示的是一个暂停图标，用户点一下反而把播放打断了，体验就完全毁了。