alice-player's Introduction

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