alice-player v0.0.4

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

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