vue-aplayer：一个基于vue2.x易于配置的音乐播放器控制组件

vue-aplayer

一个基于vue2.x易于配置的音乐播放器控制组件

这个组件是aplayer基于vue的实现，并不断的更新完善，而不仅仅只是一层封装

介绍

demo

安装

$ 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属性