Skip to content

Latest commit

 

History

History
170 lines (110 loc) · 5.45 KB

README.md

File metadata and controls

170 lines (110 loc) · 5.45 KB
Raw

Installation

Node

$ yarn add vue-aplayer

or if you prefer npm

$ npm i vue-aplayer

CDN

<script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
<script>
  Vue.component('aplayer', VueAPlayer)
</script>

Requirements

Usage

<aplayer autoplay
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'https://cn-east-17-aplayer-35525609.oss.dogecdn.com/secretbase.mp3',
    pic: 'https://cn-east-17-aplayer-35525609.oss.dogecdn.com/secretbase.jpg'
  }"
/>
// ES6
import Aplayer from 'vue-aplayer'

new Vue({
    components: {
        Aplayer
    }
})

Props

Name Type Default Description
music Object required Music info for current playing music, see Music info
list Array [] Music list to play and display. If list is not empty, music list panel will be shown, even if the only song in the list is identical to music prop.
mini Boolean false Mini mode
float Boolean false Float mode, in which you can drag the player around and leave it anywhere on your page
showLrc Boolean false Whether to show lyrics or not
mutex Boolean true Pause other players when this player is playing
theme String '#41b883' Theme color, will be overridden by current music's theme if set
shuffle Boolean false Shuffle the playlist
repeat String 'no-repeat' How to repeat play. Either to 'repeat-one' 'repeat-all' or 'no-repeat'. You can also use accordingly 'music' 'list' 'none' for easier remembering
listMaxHeight String none Max height of play list
listFolded Boolean false Fold playlist initially
narrow DEPRECATED, use mini instead
listmaxheight DEPRECATED, use listMaxHeight instead
showlrc DEPRECATED, use showLrc instead

If you are using Vue@2.3.0+, you can use .sync Modifier on music, shuffle and repeat props.

Audio attributes as props

Since v1.4.0, we added some props that names after <audio> attributes and also work as they do

Name Type Default Observable Description
autoplay Boolean false false Starts playing as soon as loaded. If more than one mutex player are set autoplay, only the first one will play.
controls Boolean false true Shows native audio controls below the player, or between player and playlist. This only works in develop environment, and doesn't work in Mini mode.
muted Boolean false true Player is muted.
preload String none true The way to load music, can be 'none' 'metadata' or 'auto'
volume Number 0.8 true Playback volume.

muted and volume props also accept .sync modifier, allowing you some custom external control capability.

Music info

The music props contains info of the song to play.

Property Default Description
src required Music source url
title 'Untitled' Music title
artist 'Unknown' Music artist
pic none Music cover picture
lrc none lrc or url to a .lrc file, see: LRC
theme none Song-specific theme color
url DEPRECATED, use src instead
author DEPRECATED, use artist instead

Events

Since v1.4.0, Vue-APlayer emits every Media Element triggered from its inner <audio> element. You can refer to MDN for the full list.

Custom events that were supported before v1.4.0, which are play pause canplay playing ended error, are all deprecated now.

Advanced

Self-adapting theme color

Since v1.3.0, if you set a Music Object's theme property to 'pic', Vue-APlayer will pick color from the songs cover image as theme color. Also, you can set player's theme prop to 'pic', it will apply to every song.

All you need to do is adding color-thief to your page.

Note that color-thief is NOT module compatible

<!-- or other CDNs you prefer -->
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>

HLS support

Since v1.3.0, Vue-APlayer supports *.m3u8 media as an optional functionality. Simply install hls.js into your project, and Vue-APlayer handles the rest.

disableVersionBadge

By default Vue-APlayer prints a version badge in console. If you want to silent it, you can set disableVersionBadge to true before you first create a Vue-APlayer instance.

import VueAPlayer from 'vue-aplayer'
VueAPlayer.disableVersionBadge = true

Slots

  • slot="display"

This slot represents the content displayed on the music info panel, which by default is the lyric scroll.

The component in this slot will receive two props: currentMusic and playStat.

Contribute

Clone this repo, then use Yarn

$ yarn
$ yarn run dev