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

一、Vue-aplayer導入

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

//導入 import aplayer from 'vue-aplayer' //定義組件components: { aplayer },//變量定義isPlay: false, //定義一個延遲加載變量，一開始music.src為空，系統加載為報錯audio: {progress: false,progressPercent: 0,successPercent: 0,list: [], //播放列表music: { //對象，title: '',artist: '',src: '',lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'}},//組件引用<aplayer v-if="isPlay":list="musicList" //列表:music="audio.music" //object對象，不能是字符串或數組，不要修改上面定義的結構></aplayer>

二、音頻數據初始化

//構建時，建立數據清單，將音頻導入

created() {this.getList()},//建立數據清單methods: {/** 查詢景區文件列表 */getList() {this.loading = truelistScenicFile(this.queryParams).then(response => { //后臺查詢文件清單，音頻文件存在OSS中，數據庫保存URLthis.scenicFileList = response.rowsthis.total = response.total//缺省顯示第一個文件或增加為播放列表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})},}

三、經驗小結

這個組件構建建中主要碰到到以下幾個問題：

1、aplayer音頻文件切換十分復雜

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

后從網上查到，需要讓對組件重新進行渲染，用了V-if，Key值變化方法，對于aplayer組件仍不生效，網上有人提到用深度監測，但沒有提供具體方法，沒法實施。

2、列表實現

剛開始用audio.music實現更表，網上也有很多方法是這么介紹的，但aplayer升版后audio.music是object，不是array，一旦用audio.music實施現了播放列表，系統總是報錯誤，組件需要的是object，而提供的是array.

后臺研究官方文檔，列表要用與music并列的list[]對象實現，最終找到解決方法。

3、延遲加載

剛開始由于沒有指定音頻文件信息，系統打開加載總報一個錯，后找到原因利用v-if實現延遲加載解決。

this.isPlay = true

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。