vue中解決chrome瀏覽器自動播放音頻和MP3語音打包到線上的實現(xiàn)方法
一、vue中解決chrome瀏覽器自動播放音頻
需求
有新訂單的時候，頁面自動語音提示和彈出提示框；
問題
chrome瀏覽器在18年4月起，就在桌面瀏覽器全面禁止了音視頻的自動播放功能。嚴格地來說，是Chrome不允許在用戶對網(wǎng)頁進行觸發(fā)之前播放音頻。不光是這樣，在頁面加載完畢的情況下，用戶沒有click、dbclick、touch等主動交互行為，使用js直接調用.play() 方法的話，chrome都會拋出如下錯誤：Uncaught (in promise) DOMException；
解決
在網(wǎng)上找了很多方法都不行，最后試出一種可行：語音播放顯示出來才可以自動播放語音，如下圖；
上代碼：
//這里就是語音播放器，必須顯示出來 <audio controls="controls" :src="sound" ref="audio"></audio> //這里是調用語音播放 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() {
//這是列表的分頁查詢
this.getLinePageWithParams();
//這里因為后端沒使用websocket,就1分鐘循環(huán)調用一次；
this.timer = setInterval(() => {
this.newOreder();
}, 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: '您有新的訂單待處理',
});
this.getLinePageWithParams();
}
}
return res;
})
.catch(() => {});
},
}
二、MP3文件上傳到線上，webpack打包丟失
去看webpack.config.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,
}
}
最后就打包成功
最后看到一種，直接URL使用百度播報，我沒試過o.o 他的微博：以下代碼來自https://www.cnblogs.com/gfweb/p/11726365.html
1,在工具文件夾utils，創(chuàng)建一個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 //語音提醒
3在其他頁面調用
this.voicePrompt('皮卡丘');
到此這篇關于vue中解決chrome瀏覽器自動播放音頻和MP3語音打包到線上的實現(xiàn)方法的文章就介紹到這了,更多相關vue chrome瀏覽器自動播放音頻內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們日常開發(fā)中，表格業(yè)務基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11
這篇文章主要介紹了使用Vue-cli 中為單獨頁面設置背景圖片鋪滿全屏，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue router 跳轉時打開新頁面的示例方法，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹的是如何用Vue做一個簡單的隨機點名冊，主要是做個簡單的點名器，不做樣式,需要的朋友可以參考一下，希望對你有所幫助2021-12-12
由于開發(fā)需要,我需要在登錄成功請求成功后,調用父窗口的一個點擊事件方法,這篇文章主要給大家介紹了關于vue跨窗口通信之新窗口調用父窗口的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue使用swiper插件實現(xiàn)垂直輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
antd Select下拉菜單動態(tài)添加option里的內容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在 Vue 的開發(fā)中，我們經(jīng)常會用到外部組件庫，這篇文章主要介紹了vue、angular深度作用選擇器,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue2和vue3實現(xiàn)圖片懶加載方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要給大家介紹了關于vite基本常見配置講解的相關資料,最近做項目要求將webpack打包方式換成vite,下面將詳細講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11