我們項目現(xiàn)在有這樣一個需求，通過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通過點擊事件讀取音頻文件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
