使用vue-aplayer插件时出现的问题的解决


Posted in Javascript onMarch 02, 2018

本文介绍了使用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()方法,至于解决方法……还在寻找中

使用vue-aplayer插件时出现的问题的解决

之前遇到的问题是

使用vue-aplayer插件时出现的问题的解决

~~~~想明白了一些

使用vue-aplayer插件时出现的问题的解决

酱紫,this.musicList是空的,obj就是空的喽。

使用vue-aplayer插件时出现的问题的解决

如果先给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插件时出现的问题的解决

正确的是酱紫的

使用vue-aplayer插件时出现的问题的解决

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
再论Javascript的类继承
Mar 05 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
js取模(求余数)隔行变色
May 15 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 #Javascript
vue中添加mp3音频文件的方法
Mar 02 #Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 #Javascript
select标签设置默认选中的选项方法
Mar 02 #Javascript
原生JavaScript实现todolist功能
Mar 02 #Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 #Javascript
vue判断input输入内容全是空格的方法
Mar 02 #Javascript
You might like
php设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
28个JS验证函数收集
2010/03/02 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python操作excel的方法
2018/08/16 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python字符串的index和find的区别详解
2020/06/20 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
介绍下java.util.Arrays类
2012/10/16 面试题
采购部经理岗位职责
2014/02/10 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
springcloud整合seata
2022/05/20 Java/Android