Vue是一款流行的JavaScript框架, 具有高效的組件化開發(fā)模式和響應(yīng)式的數(shù)據(jù)綁定能力，適合開發(fā)富交互性 Web 應(yīng)用程序。 在我們的實(shí)際開發(fā)中，UI 組件的定制和開發(fā)是一個(gè)常見的需求，本文將重點(diǎn)介紹如何使用Vue實(shí)現(xiàn)音頻播放器。
首先，我們需要安裝Vue.js 。我們可以在Vue官網(wǎng)上下載Vue.js文件，或使用npm或yarn進(jìn)行安裝:
npm install vue
登錄后復(fù)制
安裝完成后，我們可以開始構(gòu)建我們的音頻播放器。
HTML 部分
在HTML部分，我們需要先聲明一個(gè)音頻標(biāo)簽<audio>和所有的音頻播放器控制組件。 我們可以看到，我們使用了幾個(gè)按鈕來分別控制播放器的各個(gè)狀態(tài)。這些按鈕將被綁定到 vue 組件。我們還可以使用一個(gè)div來顯示音樂列表，它也將被vue組件綁定。我們同時(shí)綁定了播放列表，這樣我們就可以動(dòng)態(tài)添加和刪除音樂。
<div id="app">
<div class="audio-player">
<audio src="" id="audio" ref="audio"></audio>
<!-- 播放按鈕 -->
<button class="button" v-on:click="playAudio"><i class="fa fa-play"></i></button>
<!-- 暫停按鈕 -->
<button class="button" v-on:click="pauseAudio"><i class="fa fa-pause"></i></button>
<!-- 上一個(gè)按鈕 -->
<button class="button" v-on:click="prevAudio"><i class="fa fa-chevron-left"></i></button>
<!-- 下一個(gè)按鈕 -->
<button class="button" v-on:click="nextAudio"><i class="fa fa-chevron-right"></i></button>
<div class="playlist">
<div class="list-item" v-for="(audio,index) in audioList" v-bind:key="index" v-on:click="changeAudio(index)">
{{audio.name}}
</div>
</div>
</div>
</div>
登錄后復(fù)制
Vue 組件的定義
接下來，我們需要定義Vue組件，并實(shí)現(xiàn)我們剛才在HTML中定義的方法:
var vm = new Vue({
el: '#app',
data: {
audioList: [], // 音樂列表
currentAudio: { // 當(dāng)前音樂信息
src: '',
name: '',
artist: '',
},
currentIndex: 0, // 當(dāng)前播放音樂在列表中的索引
playStatus: false, // 播放狀態(tài)
},
methods: {
// 播放音樂
playAudio: function() {
this.playStatus = true
this.$refs.audio.play()
},
// 暫停音樂
pauseAudio: function() {
this.playStatus = false
this.$refs.audio.pause()
},
// 播放下一首
nextAudio: function() {
this.currentIndex++
if (this.currentIndex > this.audioList.length - 1) {
this.currentIndex = 0
}
this.currentAudio = this.audioList[this.currentIndex]
this.$refs.audio.src = this.currentAudio.src
this.playAudio()
},
// 播放上一首
prevAudio: function() {
this.currentIndex--
if (this.currentIndex < 0) {
this.currentIndex = this.audioList.length - 1
}
this.currentAudio = this.audioList[this.currentIndex]
this.$refs.audio.src = this.currentAudio.src
this.playAudio()
},
// 切換音樂
changeAudio: function(index) {
this.currentIndex = index
this.currentAudio = this.audioList[this.currentIndex]
this.$refs.audio.src = this.currentAudio.src
this.playAudio()
}
}
})
登錄后復(fù)制
Vue組件的核心就是data和methods屬性。 data屬性中包含一組包含音樂信息和播放列表信息的變量，它們被隨時(shí)監(jiān)測和更新，以保證頁面視圖和數(shù)據(jù)的同步。 methods屬性包含了一組方法，按需更新我們的音樂播放器。
正如我們之前所描述的一樣，我們使用了一組音樂信息的數(shù)組audioList, 以及另一個(gè)對象currentAudio，它包含了當(dāng)前播放音樂的完整信息。 我們還定義了currentIndex變量，來跟蹤當(dāng)前播放的歌曲，并使用playStatus來切換播放狀態(tài)。
我們的方法包括： playAudio和pauseAudio 控制音樂的播放（ 或暫停), nextAudio和prevAudio分別切換播放列表中的下一首或上一首音樂, changeAudio來切換到選定的音樂。
最后，使用$refs方法引用至我們之前在HTML部分聲明的音頻標(biāo)簽audio，從而可以調(diào)用它的播放和暫停方法。
綁定音樂列表
我們現(xiàn)在可以將我們的播放器和音樂列表綁定起來了。線上可以選擇適當(dāng)?shù)囊魳肺募⑵涮砑拥揭魳妨斜碇小４a如下。
vm.audioList = [
{
name: 'A Chill Sound',
artist: 'Faster san',
src: 'music/1.a-chill-sound.mp3'
},
{
name: 'Calm Breeze',
artist: 'Suraj Bista',
src: 'music/2.calm-breeze.mp3',
},
{
name: 'Happiness',
artist: 'Erick McNerney',
src: 'music/3.happiness.mp3'
}
];
vm.currentAudio = vm.audioList[vm.currentIndex];
vm.$refs.audio.src = vm.currentAudio.src;
登錄后復(fù)制
我們現(xiàn)在可以享受我們的音樂。本文介紹了如何使用Vue.js創(chuàng)建一個(gè)簡單的音樂播放器，我們看到如何使用其數(shù)據(jù)綁定和調(diào)用方法的能力來創(chuàng)建動(dòng)態(tài)應(yīng)用程序。在實(shí)現(xiàn)功能時(shí), 至關(guān)重要的是組織代碼整潔清晰，并考慮到端到端功能的安全性和易用性。
