이 글에서는 vue-aplayer 플러그인을 사용할 때 발생하는 문제에 대한 해결 방법을 주로 소개하고 참고하겠습니다.
이 글에서는 vue-aplayer 플러그인을 사용할 때 발생하는 문제에 대한 해결 방법을 소개하고 있습니다. 자세한 내용은 다음과 같습니다.
$ npm install vue-aplayer --save
로그인 후 복사
Use
<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
}
})
로그인 후 복사
Attributes
대부분의 속성은 Aplayer의 속성과 동일합니다. 옵션은 동일합니다.
속성 이름Type | 기본값 | Description | |
narrow 부울 | false | 컴팩트 스타일 | | autoplay
String | null | Yes 자동 재생, null은 자동으로 재생되지 않음을 의미합니다. | | showlrc
Boolean | false | 가사 표시 여부 | | mutex
Boolean | false | 음악이 재생 중일 때 다른 음악을 일시중지하세요. | | theme
String | '#b7daff'(하늘색) | 테마 색상 | | 모드
String | 'circulation' | 재생 모드, 무작위: 무작위 모드 sigle: 단일 루프 순환: 목록 루프 순서: 순차 재생(목록 재생 후 중지) | | preload
String | 'auto' | 음악 로딩 방법, 없음, 메타데이터, auto | | listmaxheight
String | none | 재생 목록의 최대 높이 | | music
String | Object 또는 Array | 노래 정보는 "노래 정보"를 참조하세요. 자세한 내용은 아래 | |
노래 정보
속성 음악에는 노래가 포함될 수 있습니다. 정보의 개체 유형 또는 이러한 개체가 포함된 배열 유형
속성 이름기본값 | 설명 | ㅋㅋㅋ |
picnone | 노래 포스터 | | lrc
없음 | 가사 또는 가사 파일 주소 | |
Event | | | 이벤트 이름
Parameters | Description | |
play | none | 트리거됨 재생을 시작할 때 |
pa use
none일시 중지 시 트리거
canplay | none | 데이터가 재생을 지원할 때 트리거 |
playingnone | 플레이할 때 정기적으로 실행됩니다. | | ended
none | 재생을 중지할 때 트리거됨 | | error
none | 오류가 발생할 때 트리거 | | update:mode
none | 위의 모드 속성을 확인하세요 | | 刚刚接触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='isShow' :autoplay='true' :music="musicList"></a-player>
</p>
</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项目中使用ueditor(详细教程)
通过在vue项目中引入noVNC远程桌面的方法步骤有哪些
利用nodejs爬虫使用superagent和cheerio的方法
위 내용은 vue-aplayer 플러그인을 사용할 때 발생하는 몇 가지 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2018-06-23 18:19:43
-
2018-06-23 18:17:39
-
2018-06-23 18:11:37
-
2018-06-23 18:10:14
-
2018-06-23 18:06:43
-
2018-06-23 18:04:28
-
2018-06-23 18:02:45
-
2018-06-23 18:00:45
-
2018-06-23 17:58:23
-
2018-06-23 17:56:41