Skip to content

mashirozx/alice-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

78 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

AlicePlayer

A beautiful H5 music player built with Vue3. ๐Ÿ‰

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

npm GitHub package.json dependency version (prod) GitHub package.json dependency version (dev dep on branch)

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

About

A beautiful H5 music player built with Vue3. ๐Ÿ‰

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published