|
这篇文章主要介绍了使用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的选项一样
| 属性名 |
类型 |
默认值 |
描述 |
| narrow |
Boolean |
false |
紧凑样式 |
| autoplay |
String |
null |
是否自动播放，为null表示不会自动播放 |
| showlrc |
Boolean |
false |
是否显示歌词 |
| mutex |
Boolean |
false |
当一首音乐正在播放时，暂停其他音乐 |
| theme |
String |
'#b7daff'（浅蓝色） |
主题颜色 |
| mode |
String |
'circulation' |
播放模式，random:随机模式 sigle:单曲循环 circulation:列表循环 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 –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();
错误是这样的
正确的是酱紫的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2018-3-2 09:38:47
