APlayer

Wow, such a beautiful html5 music player

Introduction

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

Screenshot

Install

$ npm install aplayer --save

CDN

cdnjs

Usage

HTML

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
    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:

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

🍭「APlayer」 - 炒鸡好看的 HTML5 音乐播放器