问题描述+如何解决

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() // 播放音频
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐