vue-aplayer 플러그인을 사용할 때 발생하는 몇 가지 문제를 해결하는 방법-JS 튜토리얼-php.cn

이 글에서는 vue-aplayer 플러그인을 사용할 때 발생하는 문제에 대한 해결 방법을 주로 소개하고 참고하겠습니다.

이 글에서는 vue-aplayer 플러그인을 사용할 때 발생하는 문제에 대한 해결 방법을 소개하고 있습니다. 자세한 내용은 다음과 같습니다.

$ npm install vue-aplayer --save

로그인 후 복사

Use

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

로그인 후 복사

Attributes

대부분의 속성은 Aplayer의 속성과 동일합니다. 옵션은 동일합니다.

속성 이름Type기본값Descriptionnarrow 부울false컴팩트 스타일autoplayStringnullYes 자동 재생, null은 자동으로 재생되지 않음을 의미합니다.showlrcBooleanfalse가사 표시 여부mutexBooleanfalse음악이 재생 중일 때 다른 음악을 일시중지하세요. themeString'#b7daff'(하늘색)테마 색상모드 String'circulation'재생 모드, 무작위: 무작위 모드 sigle: 단일 루프 순환: 목록 루프 순서: 순차 재생(목록 재생 후 중지)preloadString'auto' 음악 로딩 방법, 없음, 메타데이터, autolistmaxheightStringnone 재생 목록의 최대 높이musicStringObject 또는 Array노래 정보는 "노래 정보"를 참조하세요. 자세한 내용은 아래노래 정보

속성 음악에는 노래가 포함될 수 있습니다. 정보의 개체 유형 또는 이러한 개체가 포함된 배열 유형

속성 이름기본값설명 ㅋㅋㅋ picnone노래 포스터lrc없음 가사 또는 가사 파일 주소Event이벤트 이름ParametersDescriptionplaynone트리거됨 재생을 시작할 때pa use

none일시 중지 시 트리거

canplaynone데이터가 재생을 지원할 때 트리거playingnone플레이할 때 정기적으로 실행됩니다. endednone재생을 중지할 때 트리거됨errornone 오류가 발생할 때 트리거update:modenone위의 모드 속성을 확인하세요

刚刚接触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();

로그인 후 복사

错误是这样的