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

最新推荐文章于 2024-11-28 14:17:36 发布

Fighting_p

最新推荐文章于 2024-11-28 14:17:36 发布

阅读量6.7k

点赞数 8

分类专栏：项目问题 JavaScript html 文章标签：音视频

本文链接：https://blog.csdn.net/m0_53562074/article/details/135954320

版权

项目问题同时被 3 个专栏收录

109 篇文章

订阅专栏

JavaScript

36 篇文章

订阅专栏

html

6 篇文章

订阅专栏

文章讲述了在使用audioDom.play()时遇到DOMException错误，原因是用户未先与页面交互。作者提供了解决方案，即在播放音频前模拟一次点击事件，确保用户已与页面交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述+如何解决

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