just-audio-web报错NotAllowedError：需用户先交互文档方可播放

问题本质 #

浏览器的自动播放安全策略要求：媒体内容（音频/视频）必须在用户主动交互（点击、触摸、键盘输入等）后才能播放，否则会抛出NotAllowedError。下一曲无法自动播放，本质也是因为首次交互权限未被正确获取。

具体解决方案 #

1. 提前获取用户播放权限 #

在用户首次点击页面时，初始化媒体对象并尝试播放（可立即暂停），以此获取浏览器的播放权限：

// 仅绑定一次点击事件，避免重复执行
document.addEventListener('click', async () => {
  const audio = new Audio();
  await audio.load();
  try {
    // 触发播放以获取权限，随后暂停
    await audio.play();
    audio.pause();
  } catch (err) {
    console.error('获取播放权限失败:', err);
  }
}, { once: true });

2. 下一曲逻辑绑定权限判断 #

确保下一曲播放前已验证用户完成首次交互：

let userHasInteracted = false;

// 标记用户已完成交互
document.addEventListener('click', () => {
  userHasInteracted = true;
}, { once: true });

// 下一曲播放函数
function playNext() {
  if (!userHasInteracted) {
    alert('请先点击页面任意位置开启播放权限');
    return;
  }
  
  const nextTrack = new Audio('你的下一曲音频地址');
  nextTrack.play().catch(err => console.error('下一曲播放失败:', err));
}

3. 静音自动播放（可选） #

若业务允许，静音状态下浏览器对自动播放的限制更宽松，可先静音播放再提供手动取消静音按钮：

const audio = new Audio('音频地址');
audio.muted = true;

audio.play().then(() => {
  // 绑定取消静音按钮事件
  document.getElementById('unmute-btn').addEventListener('click', () => {
    audio.muted = false;
  });
}).catch(err => console.error('静音播放失败:', err));

4. 检查资源跨域配置 #

部分浏览器（如Safari）对跨域媒体资源的播放限制更严格，确保音频资源服务器配置了正确的CORS响应头，允许当前域名访问。

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