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屬性