mashirozx/alice-player

A beautiful H5 music player built with Vue3. 🍉

AlicePlayer

A beautiful H5 music player built with Vue3. 🍉

This project is under heavy development, APIs might be changed in the feature.

Preview

The cover	The play list	The lyrics

Demo here

Install

Using npm:

npm install alice-player --save

Using Yarn:

yarn add alice-player

Quick Start

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alice-player@latest/dist/style.css" />
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/alice-player@latest/dist/alice-player.umd.js"></script>

var playList = [
  {
    audio: 'https://s3-hk.2heng.xin/mstdn/static/alice-player/demo/僕らの手には何もないけど.mp3',
    cover: 'https://s3-hk.2heng.xin/mstdn/static/alice-player/demo/僕らの手には何もないけど.jpg',
    lrc: 'https://s3-hk.2heng.xin/mstdn/static/alice-player/demo/僕らの手には何もないけど.lrc',
    name: '僕らの手には何もないけど、',
    artist: 'RAM WIRE',
  },
]

var options = {
  container: '#app',
  preload: 'metadata',
}

var ap = new AlicePlayer(playList, options)

Options

Key	Type	Default	Description
container	String	'#app'	Where we render the player on HTML
autoplay	Boolean	false	Auto play audio
preload	String	'metadata'	HTMLMediaElement.preload
color	String	null	The default theme color, can also be set in track info object in playList, which will overwrite the global color setting
playMode	String	'order'	Value can be one of order, random, and single
volume	Number	0.7	The default volume, range from 0 to 1
storageName	String	'alice-player-setting'	The key prefix where we save values in cookie

Note: This plugin is still under heavy development, some options doesn't really work now.

TODO

• Audio buffer progress
• Media error handling
• HLS stream support
• Vue component encapsulation
• Split vender script file
• Github Pages build workflow