一、vue中解決chrome瀏覽器自動播放音訊

需求

有新訂單的時候，頁面自動語音提示和彈出提示框；

問題

chrome瀏覽器在18年4月起，就在桌面瀏覽器全面禁止了音視訊的自動播放功能。嚴格地來說，是Chrome不允許在使用者對網頁進行觸發之前播放音訊。不光是這樣，在頁面載入完畢的情況下，使用者沒有click、dbclick、touch等主動互動行為，使用js直接呼叫.play() 方法的話，chrome都會丟擲如下錯誤：Uncaught (in promise) DOMException；

解決

在網上找了很多方法都不行，最後試出一種可行：語音播放顯示出來才可以自動播放語音，如下圖；

上程式碼：

//這裡就是語音播放器，必須顯示出來
<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分鐘迴圈呼叫一次；
 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，建立一個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語音打包到線上的實現方法的文章就介紹到這了,更多相關vue chrome瀏覽器自動播放音訊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！