這篇文章主要介紹如何解決使用vue-aplayer插件時出現(xiàn)的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是專業(yè)的德安網(wǎng)站建設公司，德安接單;提供成都網(wǎng)站設計、網(wǎng)站制作,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行德安網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

具體如下：

安裝

$ npm install vue-aplayer --save

使用

<aplayer autoplay :music="{
 title: 'Preparation',
 author: 'Hans Zimmer/Richard Harvey',
 url: 'http://devtest.qiniudn.com/Preparation.mp3',
 pic: 'http://devtest.qiniudn.com/Preparation.jpg',
 lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
}">
</aplayer>
// ES6
 import Aplayer from 'vue-aplayer'
  
 new Vue({
   components: {
     Aplayer
   }
 })

屬性

這些屬性大部分跟Aplayer的選項一樣

屬性名	類型	默認值	描述
narrow	Boolean	false	緊湊樣式
autoplay	String	null	是否自動播放，為null表示不會自動播放
showlrc	Boolean	false	是否顯示歌詞
mutex	Boolean	false	當一首音樂正在播放時，暫停其他音樂
theme	String	'#b7daff'（淺藍色）	主題顏色
mode	String	'circulation'	播放模式，random:隨機模式 sigle:單曲循環(huán) circulation:列表循環(huán) order:順序播放（列表播放完即停止）
preload	String	'auto'	音樂加載方式，none,metadata,auto
listmaxheight	String	none	播放列表的大高度
music	String	Object or Array	歌曲信息，詳情見下方“歌曲信息”

歌曲信息

屬性music既可以是包含歌曲信息的對象類型，也可以是包含這些對象的數(shù)組類型

屬性名	默認值	描述
title	'Untitled'	歌曲名
author	'Unknown'	歌手
url	required	歌曲地址
pic	none	歌曲海報
lrc	none	歌詞或者歌詞文件的地址

事件

事件名	參數(shù)	描述
play	none	開始播放時觸發(fā)
pause	none	暫停時觸發(fā)
canplay	none	當數(shù)據(jù)支持播放時觸發(fā)
playing	none	播放時會定時觸發(fā)
ended	none	停止播放時觸發(fā)
error	none	錯誤出現(xiàn)時觸發(fā)
update:mode	none	見上面的mode屬性

剛剛接觸vue-aplayer,從github上找到了用法，首先需要npm install vue-aplayer –save ，之后在組件中引入import VueAplayer from ‘vue-aplayer'，別忘了注冊components: {
'a-player': VueAplayer
}
這里還有一個問題，用v-if,而不是v-show,因為是異步請求，所以一開始播放器中是沒有歌曲的，所有給了個v-if不然會插件默認會先生成播放器，導致報錯

–2017.12.2 ,現(xiàn)在的代碼版本是這樣的~

<template>
 <div class="music">
   <a-player v-if='isShow' :autoplay='true' :music="musicList"></a-player>
 </div>
</template>
<script>
import Axios from 'axios'
import VueAplayer from 'vue-aplayer'
export default{
  data(){
    return {
      musicList:[],
      isShow:false
    }
  },
  mounted(){
    Axios.get('../static/data/musicdata.json').then(res=>{
       let List = res.data.musicData;
      // console.log(res);
      List.forEach(element => {
        let obj = {
          title:element.title,
          pic:element.musicImgSrc,
          url:element.src,
          author:element.author,
          lrc:"../static/"+element.lrc
        }
        this.musicList.push(obj);
      });
        this.isShow=true; 
        console.log(this.musicList);
    }).catch(); 
  },
  components: {
    'a-player': VueAplayer
  }
}  
</script>
<style>
.music{
  margin:1rem 0;
}
</style>

還是有問題，網(wǎng)上查過之后，是因為在執(zhí)行了play()方法以后立即執(zhí)行pause()方法，至于解決方法……還在尋找中

之前遇到的問題是

~~~~想明白了一些

醬紫，this.musicList是空的，obj就是空的嘍。

如果先給this.musicList賦值了，那么push之后就會醬紫，重復兩遍

其實是很好想明白的哈。

補充的代碼，看起來更直觀

 Axios.get('../static/data/musicdata.json').then(res=>{
       // let List = res.data.musicData;
      // console.log(res);
      this.musicList.forEach(element => {
        let obj = {
          title:element.title,
          pic:element.musicImgSrc,
          url:element.src,
          author:element.author,
          lrc:"../static/"+element.lrc
        }        
        this.musicList.push(obj);
        console.log(this.musicList);
      });
        this.isShow=true; 
        console.log(this.musicList);
    }).catch();

錯誤是這樣的

正確的是醬紫的

以上是“如何解決使用vue-aplayer插件時出現(xiàn)的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章題目：如何解決使用vue-aplayer插件時出現(xiàn)的問題-創(chuàng)新互聯(lián)
瀏覽路徑：http://newbst.com/article26/hhicg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、微信公眾號、網(wǎng)站設計公司、標簽優(yōu)化、定制開發(fā)、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)