需求
用户登录后，若有报警消息，则自动播放警报音频
问题
Chrome浏览器无法自动播放音频视频，用autoplay和play()都不起作用，会报错Uncaught (in promise) DOMException
解决方案
- 先静音音频，等到用户有任何操作后再打开音频
1.app.vue
<template>
<div id="app">
<audio ref="audio" :src="audio" loop autoplay muted hidden>
您的浏览器不支持 audio 标签。
</audio>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
audio:this.UrlConstant.HOST_OTHERS+'warm1.mp3'
}
},
methods:{
playAudio(type){
switch (type) {
case 1://播放音频
this.$refs.audio.muted = false
this.$refs.audio.play()
break
case 2://暂停音频
this.$refs.audio.pause()
break
}
},
},
mounted(){
this.Bus.$on('playAudio',type=>this.playAudio(type))
var that = this
document.body.addEventListener('mousedown', function(){
that.playAudio(1)//播放音频
that.playAudio(2)//暂停音频
})
}
}
</script>
2.websocket中
initWebsocket(){
...//建立连接
ws.onmessage = function (evt) {
...//获取数据
if(that.messageList.length>0){
that.Bus.$emit('playAudio',1)//获取数据后播放音频
}
｝
｝
参考文章：解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException
