aplayer php,在使用vue-aplayer插件时出现了一些问题如何解决

这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决，现在分享给大家，也给大家做个参考。

本文介绍了使用vue-aplayer插件时出现的问题的解决，分享给大家，具体如下：

安装$ npm install vue-aplayer --save

使用

// ES6

import Aplayer from 'vue-aplayer'

new Vue({

components: {

Aplayer

}

})

属性

这些属性大部分跟Aplayer的选项一样属性名类型默认值描述narrowBooleanfalse紧凑样式

autoplayStringnull是否自动播放，为null表示不会自动播放

showlrcBooleanfalse是否显示歌词

mutexBooleanfalse当一首音乐正在播放时，暂停其他音乐

themeString'#b7daff'(浅蓝色)主题颜色

modeString'circulation'播放模式，random:随机模式 sigle:单曲循环 circulation:列表循环 order:顺序播放(列表播放完即停止)

preloadString'auto'音乐加载方式，none,metadata,auto

listmaxheightStringnone播放列表的最大高度

musicStringObject or Array歌曲信息，详情见下方“歌曲信息”

歌曲信息

属性music既可以是包含歌曲信息的对象类型，也可以是包含这些对象的数组类型属性名默认值描述title'Untitled'歌曲名

author'Unknown'歌手

urlrequired歌曲地址

picnone歌曲海报

lrcnone歌词或者歌词文件的地址

事件事件名参数描述playnone开始播放时触发

pausenone暂停时触发

canplaynone当数据支持播放时触发

playingnone播放时会定时触发

endednone停止播放时触发

errornone错误出现时触发

update:modenone见上面的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 ,现在的代码版本是这样的~

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

}

}

.music{

margin:1rem 0;

}

还是有问题，网上查过之后，是因为在执行了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();

错误是这样的

正确的是酱紫的

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：