在使用vue-aplayer外掛時出現了一些問題如何解決-js教程-PHP中文網

在使用vue-aplayer外掛時出現了一些問題如何解決

亚连

發布： 2018-06-02 09:43:37

原創

4321 人瀏覽過

這篇文章主要介紹了使用vue-aplayer外掛時出現的問題的解決，現在分享給大家，也給大家做個參考。

本文介紹了使用vue-aplayer外掛程式時出現的問題的解決，分享給大家，具體如下：

安裝##

$ npm install vue-aplayer --save

登入後複製

使用

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

登入後複製

屬性

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

##屬性名#narrowautoplay##Stringnull是否自動播放，為null表示不會自動播放showlrcBooleanfalse是否顯示歌詞#mutexBooleanfalse#當一首音樂正在播放時，暫停其他音樂 themeString'#b7daff'（淺藍色）#主題顏色mode String'circulation'播放模式，random:隨機模式sigle:單曲循環circulation:清單循環order:順序播放（清單播放完即停止）#preloadString'auto'音樂載入方式，none,metadata,autolistmaxheight Stringnone播放清單的最大高度#music

類型	預設值	描述
#Boolean	false	緊湊樣式







##String	Object or Array	歌曲訊息，詳見下方「歌曲訊息」

歌曲訊息

屬性music既可以是包含歌曲資訊的物件類型，也可以是包含這些物件的陣列類型

#屬性名稱##預設值描述title'Untitled'歌曲名稱 author'Unknown'歌手#urlrequired歌曲位址

#picnone

歌曲海報#lrcnone歌詞或是歌詞檔案的位址##參數描述play#none開始播放時觸發pausenone暫停時觸發#canplaynone當資料支援播放時觸發playingnone播放時會定時觸發

##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>
 <p class="music">
   <a-player v-if=&#39;isShow&#39; :autoplay=&#39;true&#39; :music="musicList"></a-player>
 </p>
</template>
<script>
import Axios from &#39;axios&#39;
import VueAplayer from &#39;vue-aplayer&#39;
export default{
  data(){
    return {
      musicList:[],
      isShow:false
    }
  },
  mounted(){
    Axios.get(&#39;../static/data/musicdata.json&#39;).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: {
    &#39;a-player&#39;: VueAplayer
  }
}  
</script>
<style>
.music{
  margin:1rem 0;
}
</style>

登入後複製

还是有问题，网上查过之后，是因为在执行了play()方法以后立即执行pause()方法，至于解决方法……还在寻找中

之前遇到的问题是

~~~~想明白了一些

酱紫，this.musicList是空的，obj就是空的喽。

如果先给this.musicList赋值了，那么push之后就会酱紫，重复两遍

其实是很好想明白的哈。

补充的代码，看起来更直观

 Axios.get(&#39;../static/data/musicdata.json&#39;).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();

登入後複製

错误是这样的