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

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

具體如下：

安裝

$ 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的選項一樣

歌曲信息

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

事件

剛剛接觸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()方法，至于解決方法……還在尋找中

之前遇到的問題是

~~~~想明白了一些

醬紫，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插件時出現的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！