如何在Safari的Now Playing小组件中设置播放歌曲的封面？

针对你的代码和环境，以下是几个关键修复点：

• 修正拼写错误
  代码中cover对象的属性sies是拼写错误，正确应为sizes，这个笔误会导致浏览器无法识别图片尺寸配置：

  // 错误写法
  var cover = { src: coverPath, sies: "256x256", type: "image/jpeg" }
  // 正确写法
  var cover = { src: coverPath, sizes: "256x256", type: "image/jpeg" }
  

• 必须将Metadata绑定到mediaSession
  你的代码仅创建了MediaMetadata对象，但没有将其赋值给navigator.mediaSession，这是封面不显示的核心原因，需要添加赋值代码：

  var metadata = new MediaMetadata({
    title: trackInfo["name"],
    artist: trackInfo["artists"],
    album: trackInfo["album"],
    artwork: [ cover ]
  });
  // 新增这行关键代码
  navigator.mediaSession.metadata = metadata;
  

• 检查图片跨域权限
  如果coverPath指向其他域名的图片，需确保该图片服务器配置了正确的CORS响应头（允许当前音乐网站域名访问）。可打开Safari开发者工具控制台，查看是否存在跨域加载错误。

• 优化图片尺寸与格式配置
  Safari对artwork的兼容性要求更严格，建议提供多种尺寸的图片（至少包含144x144和256x256），且使用具体图片类型（如image/jpeg）而非通配符image/*：

  artwork: [
    { src: coverPath.replace("400x400", "144x144"), sizes: "144x144", type: "image/jpeg" },
    { src: coverPath.replace("400x400", "256x256"), sizes: "256x256", type: "image/jpeg" },
    { src: coverPath, sizes: "400x400", type: "image/jpeg" }
  ]
  

• 验证coverPath有效性
  确保coverPath是完整的绝对URL，或相对路径能被当前页面正确解析。可在控制台打印coverPath，直接访问链接确认图片能正常加载。

内容的提问来源于stack exchange，提问作者Nikolai Nagornyi