我們項目現在有這樣一個需求，通過select元素來選擇音頻文件的名稱，點擊按鈕可以進行試聽。

話不多說，直接上代碼：

HTML：

<div class="testVoice"> <p class="p-title">提示聲音:</p> <el-select v-model="valueOpt2" placeholder="請選擇">  <el-option   v-for="item in options"   :key="item.valueOpt"   :label="item.label"   :value="item.valueOpt">  </el-option> </el-select> <el-button type="primary" @click="muiscPlay1">試聽</el-button></div>

JS:

data(){ return {options: [ {  valueOpt: '警報1.wav',  label: '警報1.wav' }, {  valueOpt: '警報2.wav',  label: '警報2.wav' }, {  valueOpt: '警報3.wav',  label: '警報3.wav' }, {  valueOpt: '上分.wav',  label: '上分.wav' }, {  valueOpt: '信息.wav',  label: '信息.wav' }, {  valueOpt: '封盤失敗.wav',  label: '封盤失敗.wav' }, {  valueOpt: '拉人.wav',  label: '拉人.wav' }, {  valueOpt: '老板查錢.wav',  label: '老板查錢.wav' }],valueOpt: '警報1.wav', }},methods: {//   試聽游戲音樂   muiscPlay1(){    this.gamemuiscs1 = new Audio("../../static/audio/"+this.valueOpt);    this.gamemuiscs1.play();   },}

需要注意的是this.valueOpt是對應的音頻文件名稱，而且音頻文件夾最好放在static文件夾下面，這樣才能正常讀取。

總結

以上所述是小編給大家介紹的vue通過點擊事件讀取音頻文件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！