在項(xiàng)目中，需要對(duì)某個(gè)景點(diǎn)多個(gè)介紹音頻文件進(jìn)行播放，建立這個(gè)音頻播放器還是費(fèi)了不少周折。前幾天在做音頻文件上傳與管理時(shí)時(shí)一次是單個(gè)文件的上傳、加載與播放還是比較簡(jiǎn)單，網(wǎng)上有很多案例，找來(lái)看看基本上就會(huì)，但在做播放時(shí)，同一個(gè)景點(diǎn)會(huì)存在多個(gè)播放音頻，如何讓用戶(hù)可以切換播放音頻試了很多方法，再加上vue-aplayer不同版本使用方法的不同，遇到了不少問(wèn)題，后通過(guò)深入研究，利用播放列清解決了項(xiàng)目需求。最終的效果如下：

一、Vue-aplayer導(dǎo)入

Vue-aplayer可以在使用的組件中使用時(shí)才導(dǎo)入，定義數(shù)據(jù)屬時(shí)注意與舊版本不一樣，并且music是對(duì)象，不是數(shù)組，網(wǎng)上很多文章是利用music定義數(shù)組作為清單，直接傳組件是無(wú)法使用的，我在這兒耽擱了差不多一天時(shí)間，反復(fù)測(cè)試都不行，把版本降下去也不行，后來(lái)還是看觀看最對(duì)應(yīng)版的文檔（1.6.1）才搞明白，1.6.1清單要放到list對(duì)象

//導(dǎo)入 import aplayer from 'vue-aplayer' //定義組件components: { aplayer },//變量定義isPlay: false, //定義一個(gè)延遲加載變量，一開(kāi)始music.src為空，系統(tǒng)加載為報(bào)錯(cuò)audio: {progress: false,progressPercent: 0,successPercent: 0,list: [], //播放列表music: { //對(duì)象，title: '',artist: '',src: '',lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'}},//組件引用<aplayer v-if="isPlay":list="musicList" //列表:music="audio.music" //object對(duì)象，不能是字符串或數(shù)組，不要修改上面定義的結(jié)構(gòu)></aplayer>

二、音頻數(shù)據(jù)初始化

//構(gòu)建時(shí)，建立數(shù)據(jù)清單，將音頻導(dǎo)入

created() {this.getList()},//建立數(shù)據(jù)清單methods: {/** 查詢(xún)景區(qū)文件列表 */getList() {this.loading = truelistScenicFile(this.queryParams).then(response => { //后臺(tái)查詢(xún)文件清單，音頻文件存在OSS中，數(shù)據(jù)庫(kù)保存URLthis.scenicFileList = response.rowsthis.total = response.total//缺省顯示第一個(gè)文件或增加為播放列表this.audio.music.src = process.env.VUE_APP_OSS_PREFIX + this.scenicFileList[0].fileUrlthis.audio.music.title = this.scenicFileList[0].subjectthis.audio.music.artist = this.scenicFileList[0].fileNamethis.scenicFileList.forEach(element => {let obj = {title: element.subject,src: process.env.VUE_APP_OSS_PREFIX + element.fileUrl,artist: element.fileName}this.musicList.push(obj)this.isPlay = true})}this.loading = false})},}

三、經(jīng)驗(yàn)小結(jié)

這個(gè)組件構(gòu)建建中主要碰到到以下幾個(gè)問(wèn)題：

1、aplayer音頻文件切換十分復(fù)雜

剛開(kāi)始很自然想到自己建立音頻文件清單，用戶(hù)需要時(shí)點(diǎn)擊音頻文件進(jìn)行切換即可，在富文本、圖片、視頻都是采用的這個(gè)方案，自己做文件清單還可以做得漂亮一些，比如用輪播圖片。這個(gè)方法試了很久，最后一關(guān)過(guò)不去，對(duì)audio.music對(duì)象下的SRC、title、artist賦值，并且跟蹤打印出來(lái)也是切換了但就是不生效。

后從網(wǎng)上查到，需要讓對(duì)組件重新進(jìn)行渲染，用了V-if，Key值變化方法，對(duì)于aplayer組件仍不生效，網(wǎng)上有人提到用深度監(jiān)測(cè)，但沒(méi)有提供具體方法，沒(méi)法實(shí)施。

2、列表實(shí)現(xiàn)

剛開(kāi)始用audio.music實(shí)現(xiàn)更表，網(wǎng)上也有很多方法是這么介紹的，但aplayer升版后audio.music是object，不是array，一旦用audio.music實(shí)施現(xiàn)了播放列表，系統(tǒng)總是報(bào)錯(cuò)誤，組件需要的是object，而提供的是array.

后臺(tái)研究官方文檔，列表要用與music并列的list[]對(duì)象實(shí)現(xiàn)，最終找到解決方法。

3、延遲加載

剛開(kāi)始由于沒(méi)有指定音頻文件信息，系統(tǒng)打開(kāi)加載總報(bào)一個(gè)錯(cuò)，后找到原因利用v-if實(shí)現(xiàn)延遲加載解決。

this.isPlay = true

總結(jié)

以上是生活随笔為你收集整理的VUE实现音频播放器方案（播放列表）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。