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()
 }

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

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

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

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