自动播放音频 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.`

文章共623字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

Fighting_p

2154人浏览 · 2024-01-31 15:27:00

Fighting_p · 2024-01-31 15:27:00 发布

问题描述+如何解决

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