如何解决使用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的选项一样

歌曲信息

属性music既可以是包含歌曲信息的对象类型，也可以是包含这些对象的数组类型

事件

刚刚接触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();

错误是这样的

正确的是酱紫的

以上是“如何解决使用vue-aplayer插件时出现的问题”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！