vue-aplayer

A Vue 2.x component of easy-to-config music players with controls.

Note

This component is a vue implementation of APlayer and keeps updating with it, not just a wrapper.

Introduction

Screenshot

Install

$ npm install vue-aplayer --save

Usage

<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
    }
})

Props

Props are mostly the same as Aplayer's options.

Name	Type	Default	Description
narrow	Boolean	false	narrow style
autoplay	String	null	which url in `music` is going to be autoplayed, if set to null, player won't auto play
showlrc	Boolean	false	whether to show lyrics or not
mutex	Boolean	false	pause other players when this player is playing
theme	String	'#b7daff'	theme color
mode	String	'circulation'	play mode, can be 'random' 'single 'circulation'(loop) or 'order'(no loop)
preload	String	'auto'	the way to load music, can be 'none' 'metadata' or 'auto'
listmaxheight	String	none	max height of play list
music	Object or Array	`required`	music info, see Music info

vue-aplayer component changes mode from inside (a "twoWay" props), please refer to .sync Modifier to see how to use it correctly.

If music is a single Object, you can assign it to another Object and the player will play the new song.

Music info

The music props can either be an object containing info of the song to play, or an array of such objects.

Property	Default	Description
title	'Untitled'	music title
author	'Unknown'	music author
url	`required`	music url
pic	none	music cover picture
lrc	none	lrc or url to a .lrc file, see: With lrc

Events

Name	Params	Description
play	none	Triggered when APlayer start play
pause	none	Triggered when APlayer paused
canplay	none	Triggered when enough data is available that APlayer can play
playing	none	Triggered periodically when APlayer is playing
ended	none	Triggered when APlayer ended playing
error	none	Triggered when an error occurs
update:mode	none	See `mode` props

Contribute

Feel free to open an issue if you find a bug.

Feature requests and PRs are welcome.

LICENSE

MIT Licensed. See LICENSE.

meishashi/vue-aplayer