无需登录 数据私有 本地保存

媒体会话控制模拟 - 自定义通知栏音乐控件

11
0
0
0

媒体会话控制模拟器

自定义通知栏音乐控件外观，实时预览并生成 Media Session API 代码

实时预览
歌曲信息
封面图片
封面预览 预览
🌙 梦幻流行 🎷 爵士夜晚 ☕ Lo-Fi 🎸 摇滚 🎙️ 播客
播放状态
1:48 4:00
预览主题
生成的 JavaScript 代码
// 点击"生成代码"按钮查看...
将此代码嵌入你的网页，即可控制浏览器媒体通知。
实时预览
9:41
📲 通知中心
常见问题与知识点
什么是 Media Session API？
Media Session API 是一个Web标准，允许网页控制浏览器（或操作系统）媒体通知栏中显示的内容。通过设置 navigator.mediaSession.metadata，你可以自定义通知栏中的歌曲标题、歌手、专辑封面等信息，并响应播放/暂停、上一首/下一首等用户操作。目前主要被 Chrome、Edge 等Chromium内核浏览器支持，在Android手机上效果尤为显著。
如何设置媒体会话的元数据？
使用 MediaMetadata 构造函数创建元数据对象，然后赋值给 navigator.mediaSession.metadata：

navigator.mediaSession.metadata = new MediaMetadata({
  title: '歌曲标题',
  artist: '歌手名',
  album: '专辑名',
  artwork: [{ src: '封面URL', sizes: '512x512', type: 'image/jpeg' }]
});

封面图片支持多种尺寸，浏览器会自动选择合适的尺寸显示。
支持哪些操作动作（Action Handlers）？
Media Session API 支持以下操作处理器：
• play - 播放
• pause - 暂停
• previoustrack - 上一首
• nexttrack - 下一首
• seekto - 跳转到指定位置
• seekforward - 快进（通常10秒）
• seekbackward - 快退（通常10秒）
• stop - 停止
通过 navigator.mediaSession.setActionHandler('play', callback) 设置。
为什么我的封面图片在通知栏不显示？
常见原因包括：
1. 图片URL必须使用HTTPS协议，HTTP图片可能被浏览器阻止。
2. 图片需要支持跨域访问（CORS），建议使用同源图片或配置了正确CORS头的CDN。
3. 图片尺寸建议至少 256×256像素，较大的封面（512×512）效果更好。
4. 某些浏览器可能需要用户先与页面交互（点击等）才会显示媒体通知。
5. 确保在设置metadata之前，页面已经有音频元素在播放或准备播放。
如何更新播放进度？
使用 navigator.mediaSession.setPositionState() 方法：

navigator.mediaSession.setPositionState({
  duration: 240, // 总时长（秒）
  playbackRate: 1.0, // 播放速率
  position: 108 // 当前播放位置（秒）
});

建议在音频播放过程中定期更新（例如每秒更新一次），这样通知栏的进度条才能实时反映播放状态。
这个工具生成的代码可以直接使用吗？
是的！本工具生成的代码包含完整的 Media Session API 调用，可以直接复制到你的网页项目中使用。代码包含：
• 元数据设置（标题、歌手、专辑、封面）
• 所有常用操作处理器
• 播放状态和进度的更新示例
• 兼容性检查
你只需要根据实际的音频播放逻辑，在对应的回调函数中实现真正的播放/暂停/切歌等功能即可。
🔧 相关工具