vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

//这里就是语音播放器，必须显示出来
<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(() => {});
  },
}

{
    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]',
        },
       },
      },
     },
    ],
   },

<script>
//语音的路径（当模块引入，webpack好将MP3打包）
import sounds from '@/assets/sound/1.mp3';
export default {
 data() {
  return {
   sound: sounds,
　　}
　}

function voicePrompt (text){
  new Audio('http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + text).play();
}
 
export {
  voicePrompt
}

import * as voicePromptFun from './utils/voicePrompt' 
Vue.prototype.voicePrompt = voicePromptFun.voicePrompt //语音提醒

this.voicePrompt('皮卡丘');