一、vue中解決chrome瀏覽器自動(dòng)播放音頻

需求

有新訂單的時(shí)候，頁(yè)面自動(dòng)語(yǔ)音提示和彈出提示框；

問(wèn)題

chrome瀏覽器在18年4月起，就在桌面瀏覽器全面禁止了音視頻的自動(dòng)播放功能。嚴(yán)格地來(lái)說(shuō)，是Chrome不允許在用戶(hù)對(duì)網(wǎng)頁(yè)進(jìn)行觸發(fā)之前播放音頻。不光是這樣，在頁(yè)面加載完畢的情況下，用戶(hù)沒(méi)有click、dbclick、touch等主動(dòng)交互行為，使用js直接調(diào)用.play() 方法的話(huà)，chrome都會(huì)拋出如下錯(cuò)誤：Uncaught (in promise) DOMException；

解決

在網(wǎng)上找了很多方法都不行，最后試出一種可行：語(yǔ)音播放顯示出來(lái)才可以自動(dòng)播放語(yǔ)音，如下圖；

上代碼：

//這里就是語(yǔ)音播放器，必須顯示出來(lái)<audio controls='controls' :src='http://www.leifengta.com.cn/bcjs/sound' ref='audio'></audio>//這里是調(diào)用語(yǔ)音播放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> //這里就是語(yǔ)音播放器，必須顯示出來(lái) <audio controls='controls' :src='http://www.leifengta.com.cn/bcjs/sound' ref='audio'></audio></div><script>//語(yǔ)音的路徑（這樣引入是方便打包上傳，下面有介紹）import sounds from ’@/assets/sound/1.mp3’;export default { data() { return { sound: sounds,}　}mounted() {//這是列表的分頁(yè)查詢(xún) this.getLinePageWithParams();//這里因?yàn)楹蠖藳](méi)使用websocket,就1分鐘循環(huán)調(diào)用一次； this.timer = setInterval(() => { this.newOreder(); }, 60000); }, methods: { newOreder() { api.main.op_order_existNewOrder_get().then(res => { if (res.data.success) {//res.data.data后端返回的是否有新訂單，有：true; 沒(méi)有：false if (res.data.data) { this.$refs.audio.currentTime = 0; this.$refs.audio.play(); // element ui 右上角提示窗 this.$notify({title: ’新訂單’,message: ’您有新的訂單待處理’, }); this.getLinePageWithParams(); } } return res; }) .catch(() => {}); },}

二、MP3文件上傳到線(xiàn)上，webpack打包丟失

去看webpack.config.js文件的配置,這里MP3會(huì)打包到media文件，但是沒(méi)生成；

{ 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官方文檔，解決是要在使用語(yǔ)音的地方，當(dāng)模塊import引入，才會(huì)打包；

<script>//語(yǔ)音的路徑（當(dāng)模塊引入，webpack好將MP3打包）import sounds from ’@/assets/sound/1.mp3’;export default { data() { return { sound: sounds,}　}

最后就打包成功

最后看到一種，直接URL使用百度播報(bào)，我沒(méi)試過(guò)o.o 他的微博：https://www.cnblogs.com/gfweb/p/11726365.html

1,在工具文件夾utils，創(chuàng)建一個(gè)js文件 （voicePrompt.js）

function voicePrompt (text){ new Audio(’http://tts.baidu.com/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 //語(yǔ)音提醒

3在其他頁(yè)面調(diào)用

this.voicePrompt(’皮卡丘’);

到此這篇關(guān)于vue中解決chrome瀏覽器自動(dòng)播放音頻和MP3語(yǔ)音打包到線(xiàn)上的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue chrome瀏覽器自動(dòng)播放音頻內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！