抛出DOMException: play() failed错误提示用户未先交互文档该如何解决？

报错DOMException: play() failed because the user didn't interact with the document first.是现代浏览器通用的媒体自动播放安全限制导致：为避免未经用户许可的音频骚扰，所有无用户主动交互（点击、触摸、键盘输入等）触发的自动播放行为都会被拦截。你当前代码在脚本加载完成后直接调用play()，此时用户还未对页面产生任何交互，自然会触发报错。

可用解决方法 #

• 方案1：将播放逻辑绑定到用户主动交互事件上
  最合规的方案是把播放触发和用户操作绑定，比如绑定到播放按钮的点击事件，示例代码：

  <button id="playBtn">播放音乐</button>
  <script>
  var audioElement = new Audio();
  audioElement.setTrack("assets/music/bensound-acousticbreeze.mp3");
  // 绑定到用户点击事件
  document.getElementById('playBtn').addEventListener('click', () => {
    audioElement.audio.play();
  })
  </script>
  

• 方案2：添加交互引导触发首次播放
  如果需要实现页面背景音乐类的需求，可以在页面首次加载时弹出交互提示，让用户点击「开启背景音」这类按钮，用户点击后再调用播放逻辑，后续页面内跳转不需要重复触发交互。
• 方案3：添加异常捕获避免逻辑阻塞
  play()方法返回的是Promise对象，建议统一添加异常捕获，避免未满足播放条件时抛出的错误阻塞页面其他逻辑执行，示例代码：

  audioElement.audio.play()
  .then(() => {
    // 播放成功逻辑
  })
  .catch(err => {
    // 播放失败逻辑，可在这里弹出引导用户交互的提示
    console.log('播放触发失败，请先点击页面任意位置')
  })
  

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