自动播放音频 audioDom.play() 报错 - play() failed because the user didn‘t interact with the document first.

问题描述+如何解决

audioDom.play() 自动播放音频时报错：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

• 报错的意思是：用户没有先与页面进行交互
• 【解决】在播放音频前，模拟一次用户与页面交互行为（click 点击事件）

代码

<el-alert
  v-show="isShowWarning"
  class="notice"
  title="您有一条新预警！"
  type="warning"
  @close="warningCloseHandler('none')"
>
  <div class="warning_voice">
    <audio controls>
      <source src="@/assets/warning_voice.mp3" type="audio/ogg" />
      <source src="@/assets/warning_voice.mp3" type="audio/mpeg" />
      您的浏览器不支持 audio 元素。
    </audio>
  </div>
</el-alert>

const audioDom = document.querySelector('.warning_voice audio')
audioDom && audioDom.click() // 【主要代码 - 解决报错】先模拟与页面进行交互，防止报错
audioDom && audioDom.play() // 播放音频