vue-aplayer
一個基于vue2.x易于配置的音樂播放器控制元件
這個元件是aplayer基于vue的實作,并不斷的更新完善,而不僅僅隻是一層封裝
介紹
demo
安裝
使用
<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屬性 |