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