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

//这里就是语音播放器，必须显示出来
<audio controls="controls" :src="/UploadFiles/2021-04-02/sound">

功能的全部代码：


<div>
 <v-btn color="lime lighten-1" @click="handleDispatch" small><v-icon left>mdi-account</v-icon>人工派单 </v-btn>
 //这里就是语音播放器，必须显示出来
 <audio controls="controls" :src="/UploadFiles/2021-04-02/sound">

二、MP3文件上传到线上，webpack打包丢失

去看webpack.config.js文件的配置,这里MP3会打包到media文件，但是没生成；


{
 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\"htmlcode">

<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"htmlcode">

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


3在其他页面调用


this.voicePrompt('皮卡丘');




            
            上一篇：IDEA配置jQuery, $符号不再显示黄色波浪线的问题

            下一篇：vue实现选中效果