โคNovice Prime Minister

    alice-player

    0.0.4ย โ€ขย Publicย โ€ขย Published

    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

    Keywords

    Install

    npm i alice-player

    DownloadsWeekly Downloads

    1

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    947 kB

    Total Files

    9

    Last publish

    Collaborators

    • mashirozx