vue中解決chrome瀏覽器自動(dòng)播放音頻和MP3語(yǔ)音打包到線(xiàn)上的實(shí)現(xiàn)方法
一、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="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="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 他的微博:以下代碼來(lái)自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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
- 詳解vue-cli3開(kāi)發(fā)Chrome插件實(shí)踐
- 用VueJS寫(xiě)一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法
- vue.js 初體驗(yàn)之Chrome 插件開(kāi)發(fā)實(shí)錄
- Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無(wú)法冒泡的解決方法
- 使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解
- vue開(kāi)發(fā)chrome插件,實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能
相關(guān)文章
vue+swiper實(shí)現(xiàn)側(cè)滑菜單效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)側(cè)滑菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題
這篇文章主要介紹了關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)
這篇文章主要介紹了vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的方法
本文主要介紹了vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記(推薦)
公司最近有一個(gè)H5頁(yè)面的功能,比較簡(jiǎn)單的一個(gè)調(diào)查表功能,嵌套在我們微信公眾號(hào)里面。這篇文章主要介紹了使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記,需要的朋友可以參考下2019-04-04