vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

vue中解决中解决chrome浏览器自动播放音频和浏览器自动播放音频和MP3语音打包到线上的实现方法语音打包到线上的实现方法

主要介绍了vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需

要的朋友可以参考下

一、一、vue中解决中解决chrome浏览器自动播放音频浏览器自动播放音频

需求需求

有新订单的时候，页面自动语音提示和弹出提示框；

问题问题

chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有

//这里是调用语音播放

this.$refs.audio.currentTime = 0;

this.$refs.audio.play();

功能的全部代码：

<div>

<v-btn color="lime lighten-1" @click="handleDispatch" small><v-icon left>mdi-account</v-icon>人工派单 </v-btn>

//这里就是语音播放器，必须显示出来

<audio controls="controls" :src="sound" ref="audio"></audio>

</div>

<script>

　　}

　}

mounted() {

　　//这是列表的分页查询

this.getLinePageWithParams();

　　//这里因为后端没使用websocket,就1分钟循环调用一次；

this.timer = setInterval(() => {

this.newOreder();

}, 60000);

},

this.$refs.audio.currentTime = 0;

this.$refs.audio.play();

// element ui 右上角提示窗

this.$notify({

title: '新订单',

message: '您有新的订单待处理',

});

this.getLinePageWithParams();

}