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
[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:싱글 순환 순환 순환:목록 순환 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 Csave 가 필요 합 니 다.그 다음 에 구성 요소 에 import VueAplayer from'vue-aplayer'를 도입 합 니 다.등록 components:{를 잊 지 마 세 요.
'a-player': VueAplayer
}
여기에 또 하나의 문제 가 있 습 니 다.v-if 를 사용 합 니 다.v-show 가 아 닙 니 다.비동기 요청 이 었 기 때문에 처음에는 재생 기 에 노래 가 없 었 습 니 다.모든 것 이 v-if 를 주 었 습 니 다.그렇지 않 으 면 플러그 인 은 기본적으로 플레이어 가 되 어 오류 가 발생 할 수 있 습 니 다.
C2017.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.music List 는 비어 있 고,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(); 

잘못 은 이렇다

정 답 은 자줏빛.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.