为何页面加载自动播放音频时报DOMException：play()因用户未交互失败？

这个报错是浏览器内置自动播放权限策略强制拦截导致的，和你的代码业务逻辑本身无关：

• 主流浏览器为了避免未经用户许可自动播放音视频带来的打扰、流量损耗问题，明确规定：网页内所有音视频元素的play()方法，必须在用户和页面发生过至少一次有效交互（包括点击、按键、触摸等真实操作）后，才能正常执行。
• 你当前的代码在页面加载阶段就直接调用nextSequence()，无任何前置用户交互就触发了Sound.play()，完全不满足浏览器的播放权限要求，因此play()方法返回的Promise直接被拒绝，抛出对应的DOMException。而代码中数组存值、按钮类名切换的逻辑不涉及浏览器的权限管控，因此可以正常运行，和你观察到的现象完全一致。

• 将初始游戏启动逻辑绑定到首次用户交互上
  移除页面加载即调用nextSequence()的逻辑，给文档添加一次性的事件监听，在用户第一次完成点击、按键等有效操作时，再触发首次的nextSequence()流程。这种改动最小，不需要调整现有游戏的核心逻辑，就能完全符合浏览器的权限要求。
• 提前完成音频权限解锁
  在用户首次交互触发时，提前将所有游戏用到的4个音效实例初始化完成，先通过一次0音量的极短播放完成浏览器的播放权限校验，后续游戏流程中切换音效播放时就不会再被拦截。这种方式还能规避每次调用new Audio()创建实例带来的音效加载延迟，提升播放流畅度。
• 增加明确的游戏启动引导
  可以在页面首屏设置清晰的启动入口（比如“点击开始挑战”的引导按钮），用户点击按钮的操作本身就是合法的用户交互，点击完成后再启动第一轮随机序列的生成逻辑。这种方式对于记忆闯关类游戏来说，也能帮助用户建立明确的启动预期，避免页面刚打开就随机出现按钮闪烁的突兀感。

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