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

PHP中文网 • 2025年3月8日 05:50:37 • 编程技术 • 阅读 2

这篇文章主要介绍了使用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,autolistmaxheightStringnone播放列表的最大高度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();

登录后复制

错误是这样的