vue中解决chrome浏览器⾃动播放⾳频和MP3语⾳打包到线上的实现⽅法
⼀、vue中解决chrome浏览器⾃动播放⾳频
需求
有新订单的时候，页⾯⾃动语⾳提⽰和弹出提⽰框；
问题
chrome浏览器在18年4⽉起，就在桌⾯浏览器全⾯禁⽌了⾳视频的⾃动播放功能。严格地来说，是Chrome不允许在⽤户对⽹页进⾏触发之前播放⾳频。不光是这样，在页⾯加载完毕的情况下，⽤户没有click、dbclick、touch等主动交互⾏为，使⽤js直接调⽤.play() ⽅法的话，chrome都会抛出如下错误：Uncaught (in promise) DOMException；
解决
在⽹上了很多⽅法都不⾏，最后试出⼀种可⾏：语⾳播放显⽰出来才可以⾃动播放语⾳，如下图；
上代码：
//这⾥就是语⾳播放器，必须显⽰出来
<audio controls="controls" :src="sound" ref="audio"></audio>
/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>
//语⾳的路径（这样引⼊是⽅便打包上传，下⾯有介绍）
import sounds from '@/assets/sound/1.mp3';
export default {
data() {
return {
sound: sounds,
  }
　}
mounted() {
  //这是列表的分页查询
  //这⾥因为后端没使⽤websocket，就1分钟循环调⽤⼀次；
this.timer = setInterval(() => {
}, 60000);
},
methods: {
newOreder() {
api.main.op_order_existNewOrder_get().then(res => {
if (res.data.success) {
        //res.data.data后端返回的是否有新订单，有：true; 没有：false
if (res.data.data) {
this.$refs.audio.currentTime = 0;
this.$refs.audio.play();
// element ui 右上⾓提⽰窗
this.$notify({
title: '新订单',
message: '您有新的订单待处理',
});
}
}
return res;
})
.
catch(() => {});
},
}
⼆、MP3⽂件上传到线上，webpack打包丢失
去看fig.js⽂件的配置，这⾥MP3会打包到media⽂件，但是没⽣成；
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
},
},
],
},
最后去看webpack官⽅⽂档，解决是要在使⽤语⾳的地⽅，当模块import引⼊，才会打包；
<script>
//语⾳的路径（当模块引⼊，webpack好将MP3打包）
import sounds from '@/assets/sound/1.mp3';
export default {
data() {
return {
sound: sounds,
  }
　}
最后就打包成功
1，在⼯具⽂件夹utils，创建⼀个js⽂件（voicePrompt.js）
function voicePrompt (text){
new Audio('tts.baidu/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + text).play();
}
export {
voicePrompt
}
2在min.js
import * as voicePromptFun from './utils/voicePrompt'
Vue.prototype.voicePrompt = voicePromptFun.voicePrompt //语⾳提醒
3在其他页⾯调⽤
this.voicePrompt('⽪卡丘');
到此这篇关于vue中解决chrome浏览器⾃动播放⾳频和MP3语⾳打包到线上的实现⽅法的⽂章就介绍到这了，更多相关vue chrome浏览器⾃动播放⾳频内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。