自动播放音频 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() // 播放音频
更多推荐
已为社区贡献9条内容
所有评论(0)