欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中解決chrome瀏覽器自動(dòng)播放音頻和MP3語(yǔ)音打包到線(xiàn)上的實(shí)現(xiàn)方法

 更新時(shí)間:2020年10月09日 14:56:17   作者:糊涂蝸牛  
這篇文章主要介紹了vue中解決chrome瀏覽器自動(dòng)播放音頻和MP3語(yǔ)音打包到線(xiàn)上的實(shí)現(xiàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、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ān)文章

最新評(píng)論