Uncaught (in promise) DOMException: play()失败因用户未先交互文档如何修复？

该报错是主流浏览器为了避免页面未经用户许可自动播放音视频造成打扰，统一实现的autoplay限制规则：只有在用户主动和页面发生过交互（点击、触摸、键盘输入等操作）之后，才能调用play()方法触发音视频播放。你提供的代码逻辑是页面加载后直接启动定时器调用play()，此时还没有任何用户交互，因此被浏览器拦截触发报错。

• 方案1：将播放逻辑绑定用户交互事件
  把播放触发逻辑和用户主动操作绑定，比如点击指定按钮后再启动定时器播放，同时建议给play()添加异常捕获，避免特殊情况报错打断其他逻辑，示例代码如下：

const audioCls = new Audio("/assets/audio/a4.mp3");
// 替换为页面内实际的交互元素选择器，比如播放按钮的id
document.querySelector("#playBtn").addEventListener("click", () => {
  setInterval(() => {
    audioCls.play().catch(err => console.log("播放异常：", err));
  }, 1000);
});

• 方案2：首次交互时提前激活音频权限
  如果业务需要页面后续自动定时播放，可以在用户第一次和页面发生任意交互的时机，先触发一次静音播放+暂停激活音频上下文，后续即可正常调用播放方法，示例代码如下：

const audioCls = new Audio("/assets/audio/a4.mp3");
let audioActivated = false;

// 监听页面首次点击事件，仅触发一次
document.addEventListener("click", () => {
  if (!audioActivated) {
    audioCls.muted = true;
    audioCls.play().then(() => {
      audioCls.pause();
      audioCls.muted = false;
      audioActivated = true;
      // 激活权限后启动定时播放
      setInterval(() => {
        audioCls.play().catch(err => console.log("播放异常：", err));
      }, 1000);
    }).catch(err => console.log("音频权限激活失败：", err));
  }
}, { once: true });

• 不要尝试绕过浏览器的autoplay限制，所有投机绕开方案都会在后续浏览器版本更新后失效
• 除点击事件外，真实用户触发的触摸事件、键盘输入事件都可以用来激活音频播放权限

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