如何解決使用vue-aplayer插件時出現的問題

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

我們提供的服務有：成都網站制作、網站建設、微信公眾號開發、網站優化、網站認證、白城ssl等。為近1000家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的白城網站制作公司

具體如下：

安裝

$ 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:單曲循環 circulation:列表循環 order:順序播放（列表播放完即停止）
preload	String	'auto'	音樂加載方式，none,metadata,auto
listmaxheight	String	none	播放列表的最大高度
music	String	Object or Array	歌曲信息，詳情見下方“歌曲信息”

歌曲信息

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

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

事件

事件名	參數	描述
play	none	開始播放時觸發
pause	none	暫停時觸發
canplay	none	當數據支持播放時觸發
playing	none	播放時會定時觸發
ended	none	停止播放時觸發
error	none	錯誤出現時觸發
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 ,現在的代碼版本是這樣的~

<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>

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

如何解決使用vue-aplayer插件時出現的問題

之前遇到的問題是

如何解決使用vue-aplayer插件時出現的問題

~~~~想明白了一些

如何解決使用vue-aplayer插件時出現的問題

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

如何解決使用vue-aplayer插件時出現的問題

如果先給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插件時出現的問題