js 自动播放音频文件，报警提示音等

谷歌浏览器的音频，默认是不能在页面载入时直接自动播放的。

至少需要用户点击一下页面，才可以播放音频，这个策略的目的是保证用户的体验感，如果每个页面都能在用户未接触页面的时候自动播放音频，那用户体验就太差了。

首次载入页面，用户没有点击页面的情况下，执行audioElement.play()会出现以下错误

Home.vue?76f2:375 Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

添加方法

在页面中添加

没有添加 controller 所以不会显示这个音频 dom

<audio ref="alertAudioEl" autoplay :src="alertAudio"/>

data(){return {alertAudio: require('@/assets/mp3/alertAudio.wav'),}}

mounted(){this.$refs.alertAudioEl.addEventListener("canplaythrough", event => {this.$refs.alertAudioEl.click()this.$refs.alertAudioEl.play()})}

当需要播放声音的时候，执行播放即可

if (this.nowinfo.warningno > 0){console.log('audio triggered: ')this.$refs.alertAudioEl.play()}

另一个相对比较合理的解决方案

在 Vue 中设置以上内容再添加一个store.alertAudioHasOpened = false这么一个变量，用于标记用户是否已经打开声音报警将这个值绑定到一个按钮上，当用户点击的时候，改变这个值为true这个变量的目的是只有用户点击的时候才会开启声音报警，用户点击了声音也能播放了。能跟用户更合理的解释这个过程。如果非要打开页面的时候不进行任何操作就能播放音频：不可能，实现不了。

if (this.nowinfo.warningno > 0 && this.alertAudioHasOpened){console.log('audio triggered: ')this.$refs.alertAudioEl.play()}

这样同时解决了可以实现开启、关闭报警的功能。

如果觉得《js 自动播放音频文件 报警提示音等》对你有帮助，请点赞、收藏，并留下你的观点哦！