Apple MusicKit JS在Chrome/Firefox部分歌曲无法播放（Safari正常）

问题核心分析 #

你遇到的差异源于浏览器对Apple Music内容的DRM和流媒体支持不同：

• Safari原生支持FairPlay DRM与HLS(m3u8)流，能直接处理播放请求；
• Chrome/Firefox依赖MediaSource Extensions(MSE)处理HLS，且FairPlay DRM的适配需要MusicKit正确初始化；
• 无报错信息是因为代码未添加错误捕获逻辑，无法定位具体问题点。

具体解决步骤 #

1. 新增错误捕获逻辑，定位问题根源 #

修改JS代码，为播放器和Promise链添加错误监听，以便排查具体故障：

document.addEventListener('musickitloaded', function() {
  MusicKit.configure({
    developerToken: 'MyDeveloperToken',
    app: {
      name: 'Apple Music App',
      build: '1.0.0'
    }
  });

  // 初始化后立即监听播放器错误
  const music = MusicKit.getInstance();
  music.player.addEventListener('error', (error) => {
    console.error('播放器错误详情:', error);
  });
});

function playASong() {
  var music = MusicKit.getInstance();
  music.authorize()
    .then(function() {
      // 替换为目标歌曲的实际Apple Music ID（从歌曲URL最后一段获取）
      return music.setQueue({ ids: ['1787174373'] });
    })
    .then(function(queue) {
      return music.player.prepareToPlay(queue.nextPlayableItem);
    })
    .then(function() {
      return music.player.play();
    })
    .catch(function(error) {
      console.error('播放流程错误:', error);
    });
}

const playbtn = document.querySelector(".play-button");
playbtn.addEventListener("click", function () {
    playASong();
});

2. 改用歌曲ID设置播放队列 #

使用专辑URL时，MusicKit在非Safari浏览器中可能无法正确解析出可播放曲目，直接使用歌曲的Apple Music ID（可通过歌曲URL末尾字段或Apple Music开发者API获取）能避免解析异常。

3. 验证浏览器DRM支持状态 #

确保Chrome/Firefox已启用FairPlay相关配置：

• Chrome：在chrome://flags/中确认Widevine DRM和FairPlay DRM处于启用状态；
• Firefox：在about:config中确认media.eme.enabled和media.gmp-manager.updateEnabled为true。

4. 检查Developer Token有效性 #

确认你的开发者Token：

• 绑定了当前网站的域名（Apple要求Token与请求来源域名匹配）；
• 未过期（最长有效期为6个月）；
• 包含streaming和music-library-read权限。

补充说明 #

Chrome/Firefox中audio元素显示为blob是正常行为——MusicKit会将HLS流包装为blob URL通过MSE播放，而Safari直接使用原生HLS支持加载m3u8链接，只要配置正确，blob格式不影响播放。

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