我們項目現在有這樣一個需求，通過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項目中如何通過點擊事件讀取音頻文件的方法