anonymity94 / aplayer

:lollipop:Wow, such a beautiful HTML5 music player

APlayer

Wow, such a beautiful html5 music player

Introduction

UI 参考网易云音乐外链播放器

Demo

Screenshot

Install

$ npm install aplayer --save

CDN

cdnjs

Usage

HTML

<link rel="stylesheet" href="APlayer.min.css">
<!-- ... -->
<div id="player1" class="aplayer"></div>
<!-- ... -->
<script src="APlayer.min.js"></script>

JS

var ap = new APlayer(option);
ap.init();

Options

var option = {
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: true,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    loop: true,                                                        // Optional, loop play music, default: true
    music: {                                                           // Required, music info, see: ###With playlist
        title: 'Preparation',                                          // Required, music title
        author: 'Hans Zimmer/Richard Harvey',                          // Required, music author
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',  // Required, music url
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'   // Optional, music picture
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'                   // Optional, lrc, see: ###With lrc
    }
}

API

• ap.init()
• ap.play()
• ap.pause()

Event binding

ap.on(event, handler)

event:

• play: Triggered when APlayer start play
• pause: Triggered when APlayer paused
• canplay: Triggered when enough data is available that APlayer can be played
• playing: Triggered periodically when APlayer is playing
• ended: Triggered when APlayer ended
• error: Triggered when an error occurs

Work with module bundler

var APlayer = require('APlayer');
var ap = new APlayer({
    // ...
});

With lrc

Show lrc, you can put LRC in JS or HTML as you like.

LRC format:

Support multiple time tag, support three decimal second

[mm:ss.xx]lyric
[mm:ss.xxx]lyric
[mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
...

LRC in JS:

JS:

{
    showlrc: 1,
    music: {
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'    // lrc here, separate lines with \n
    }
}

LRC in HTML:

JS:

{
    showlrc: 2
}

HTML:

<div id="player1" class="aplayer">
    <pre class="aplayer-lrc-content">
        [00:00.00]平凡之路 - 朴树
        [00:04.01]作词：韩寒 朴树
        [00:08.02]作曲：朴树 编曲：朴树
        [00:12.02]徘徊着的 在路上的
        [00:17.37]你要走吗
        [00:23.20]易碎的 骄傲着
        <!-- ... -->
    </pre>
</div>

With playlist

Show multiple music.

JS:

Option:

music: [
    {
        title: '',
        author: '',
        url: '',
        pic: ''
    },
    {
        title: '',
        author: '',
        url: '',
        pic: ''
    },
    ...
]

Run in development

$ npm install
$ npm run dev

Make a release

$ npm install
$ npm run build

Related Projects

• APlayer-Typecho-Plugin

• hexo-tag-aplayer

• 163music-APlayer-you-get-docker

LICENSE

MIT © DIYgod