使用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 相关文章推荐
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
vue 进阶之实现父子组件间的传值
Apr 26 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原创论坛
2006/10/09 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
python django 增删改查操作 数据库Mysql
2017/07/27 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
keras topN显示,自编写代码案例
2020/07/03 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
护士感人事迹
2014/05/01 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫