audio的自动播放报错解决

使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图

audio的自动播放报错解决

查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动播放,必须由用户交互后才能触发

当用户点击网页后,点击任何位置都行,andio就能自动播报了,然后我就想了个方案,设置个按钮,让按钮自动点击,然后触发audio,然而发现这种作弊方案,仍旧不行

后来各种找方法,标签加muted属性仍于事无补,到最后也只有没有办法的办法

由于play()方法是一个promise,监听它的成功和失败状态,如果失败,那就提醒用户进行交互,设置一个激活按钮,点击后就能触发了

 <template>
<el-button class="autoPlay" type="text" v-if="isShow" @click="autoPlay">激活</el-button>
<!-- audio宽度设0,让其隐藏 -->
<audio muted controls ref="audio" :src="audioSrc" style="width: 0px;"></audio>
</template>
import newOrder from '@/assets/audio/new_order.mp3' export default {
data () {
return {
audioSrc: newOrder,
isShow: false
}
},
created() {
this.open()
},
methods: {
open() {
const myAudio = document.getElementsByTagName('audio')[0]
if (myAudio.canPlayType) {
this.autoPlay()
} else {
this.$message({
type: 'error',
message: '您的浏览器不支持语音播报'
})
}
},
// 自动播放
autoPlay() {
this.$refs.audio.play().then(() => {
this.isShow = false
}).catch(() => {
this.$message({
type: 'error',
message: '语音播报失效,点击右上角"激活"按钮'
})
this.isShow = true
})
}
}
}
上一篇:错误之Illegal mix of collations for operation 'like'


下一篇:[Python Study Notes]CS架构远程访问获取信息--Client端v2.0