# alice-player

> > A beautiful H5 music player built with Vue3. 🍉

Latest version **0.0.4** (published 2021-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install alice-player
pnpm add alice-player
yarn add alice-player
bun add alice-player
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-05-14 |
| First published | 2021-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 924.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 59 |
| Author | Mashiro |
| Maintainers | mashirozx |
| Keywords | Vue3, player |

## Links

- npm: https://www.npmjs.com/package/alice-player
- Repository: https://github.com/mashirozx/alice-player
- Homepage: https://github.com/mashirozx/alice-player#readme
- Issues: https://github.com/mashirozx/alice-player/issues
- npm.io page: https://npm.io/package/alice-player

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^3.0.5
- [chroma-js](https://npm.io/package/chroma-js.md) ^2.1.1
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.1
- [object-hash](https://npm.io/package/object-hash.md) ^2.1.1
- [@yzfe/svgicon](https://npm.io/package/@yzfe/svgicon.md) ^1.0.1
- [@moezx/colorthief](https://npm.io/package/@moezx/colorthief.md) ^2.3.2-1
- [@yzfe/vue3-svgicon](https://npm.io/package/@yzfe/vue3-svgicon.md) ^1.0.1

## Recent versions

- 0.0.4 (latest) — 2021-05-14
- 0.0.3 — 2021-05-14
- 0.0.2 — 2021-05-13
- 0.0.1 — 2021-05-13

## README

# 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 |
| :-: | :-: | :-: |
| ![](https://s3-hk.2heng.xin/mstdn/media_attachments/files/106/221/762/069/086/405/original/4279a568c47a6c9e.png) | ![](https://s3-hk.2heng.xin/mstdn/media_attachments/files/106/221/763/122/105/741/original/61f4e01d263edb15.png) | ![](https://s3-hk.2heng.xin/mstdn/media_attachments/files/106/221/764/660/792/844/original/f3836219b5a4f296.png) |

Demo [here](https://player.2heng.xin/)

## Install

Using npm:

```bash
npm install alice-player --save
```

Using Yarn:

```bash
yarn add alice-player
```

## Quick Start

```html
<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>
```

```js
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-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

---
_Source: https://npm.io/package/alice-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._