vue通過點(diǎn)擊事件讀取音頻文件的方法
更新時(shí)間：2018年05月30日 08:38:05 作者：zhougx
最近做項(xiàng)目遇到這樣的一個(gè)需求，通過select元素來選擇音頻文件的名稱，點(diǎn)擊按鈕可以進(jìn)行試聽。接下來通過本文給大家介紹vue項(xiàng)目中通過點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下
我們項(xiàng)目現(xiàn)在有這樣一個(gè)需求，通過select元素來選擇音頻文件的名稱，點(diǎn)擊按鈕可以進(jìn)行試聽。
話不多說，直接上代碼：
HTML：
<div class="testVoice"> <p class="p-title">提示聲音:</p> <el-select v-model="valueOpt2" placeholder="請(qǐng)選擇"> <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: '警報(bào)1.wav',
label: '警報(bào)1.wav'
}, {
valueOpt: '警報(bào)2.wav',
label: '警報(bào)2.wav'
}, {
valueOpt: '警報(bào)3.wav',
label: '警報(bào)3.wav'
}, {
valueOpt: '上分.wav',
label: '上分.wav'
}, {
valueOpt: '信息.wav',
label: '信息.wav'
}, {
valueOpt: '封盤失敗.wav',
label: '封盤失敗.wav'
}, {
valueOpt: '拉人.wav',
label: '拉人.wav'
}, {
valueOpt: '老板查錢.wav',
label: '老板查錢.wav'
}
],
valueOpt: '警報(bào)1.wav',
}
},
methods: {
// 試聽游戲音樂
muiscPlay1(){
this.gamemuiscs1 = new Audio("../../static/audio/"+this.valueOpt);
this.gamemuiscs1.play();
},
}
需要注意的是this.valueOpt是對(duì)應(yīng)的音頻文件名稱，而且音頻文件夾最好放在static文件夾下面，這樣才能正常讀取。
總結(jié)
以上所述是小編給大家介紹的vue通過點(diǎn)擊事件讀取音頻文件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
v-slot和slot、slot-scope之間相互替換實(shí)例
這篇文章主要介紹了v-slot和slot、slot-scope之間相互替換實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue Element前端應(yīng)用開發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中，菜單也屬于權(quán)限控制的一個(gè)資源，屬于角色控制的一環(huán)。不同角色用戶，登錄系統(tǒng)后，出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合，實(shí)現(xiàn)可訪問路由的過濾，也就實(shí)現(xiàn)了對(duì)應(yīng)角色菜單的展示和可訪問路由的控制。2021-05-05
Vue數(shù)據(jù)驅(qū)動(dòng)試圖的實(shí)現(xiàn)方法及原理
當(dāng)Vue實(shí)例中的數(shù)據(jù)（data）發(fā)生變化時(shí),與之相關(guān)聯(lián)的視圖（template）會(huì)自動(dòng)更新,反映出最新的數(shù)據(jù)狀態(tài), Vue的數(shù)據(jù)驅(qū)動(dòng)視圖是通過其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的,以下是Vue數(shù)據(jù)驅(qū)動(dòng)視圖實(shí)現(xiàn)的核心原理,需要的朋友可以參考下2024-10-10
Vue3的provide和inject實(shí)現(xiàn)多級(jí)傳遞的原理解析
Vue3中的provide和inject函數(shù)通過原型鏈實(shí)現(xiàn)數(shù)據(jù)的多級(jí)傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過inject獲取這些數(shù)據(jù),在創(chuàng)建組件實(shí)例時(shí),子組件會(huì)繼承父組件的provides屬性對(duì)象,介紹Vue3的provide和inject實(shí)現(xiàn)多級(jí)傳遞的原理,需要的朋友可以參考下2024-12-12
Vue3 defineExpose要在方法聲明定義以后使用的教程
這篇文章主要介紹了Vue3 defineExpose要在方法聲明定義以后使用的教程,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決
這篇文章主要介紹了vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了element實(shí)現(xiàn)合并單元格通用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
最近工作中遇到了一些問題,通過查找相關(guān)資料終于找到了相關(guān)的解決方法,這篇文章主要給大家介紹了關(guān)于Vue不能下載xls以及文件亂碼問題解決的相關(guān)資料,需要的朋友可以參考下2022-04-04
微信小程序Echarts動(dòng)態(tài)使用及圖表層級(jí)踩坑解決方案
這篇文章主要為大家介紹了微信小程序Echarts動(dòng)態(tài)使用及圖表層級(jí)踩坑解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了vue.js層疊輪播效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11