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

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

具體如下：

安裝

$ 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的選項(xiàng)一樣

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

歌曲信息

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

屬性名	默認(rèn)值	描述
title	'Untitled'	歌曲名
author	'Unknown'	歌手
url	required	歌曲地址
pic	none	歌曲海報(bào)
lrc	none	歌詞或者歌詞文件的地址

事件

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

剛剛接觸vue-aplayer,從github上找到了用法，首先需要npm install vue-aplayer –save ，之后在組件中引入import VueAplayer from ‘vue-aplayer'，別忘了注冊(cè)components: {
'a-player': VueAplayer
}
這里還有一個(gè)問(wèn)題，用v-if,而不是v-show,因?yàn)槭钱惒秸?qǐng)求，所以一開(kāi)始播放器中是沒(méi)有歌曲的，所有給了個(gè)v-if不然會(huì)插件默認(rèn)會(huì)先生成播放器，導(dǎo)致報(bào)錯(cuò)

–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èn)題，網(wǎng)上查過(guò)之后，是因?yàn)樵趫?zhí)行了play()方法以后立即執(zhí)行pause()方法，至于解決方法……還在尋找中

之前遇到的問(wèn)題是

~~~~想明白了一些

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

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

其實(shí)是很好想明白的哈。

補(bǔ)充的代碼，看起來(lái)更直觀

 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();

錯(cuò)誤是這樣的

正確的是醬紫的

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

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

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

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

廣告

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