carabina / aplayer Goto Github PK

View Code? Open in Web Editor NEW

This project forked from diygod/aplayer

0.0 1.0 0.0 17.38 MB

:wind_chime:Wow, such a beautiful html5 music player

Home Page: https://www.anotherhome.net/file/APlayer/

HTML 24.25% JavaScript 46.48% CSS 29.26%

aplayer's Introduction

APlayer

Wow, such a beautiful html5 music player

Introduction

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

Demo

Screenshot

Install

$ npm install aplayer

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({
    element: document.getElementById('player1'),
    narrow: false,
    autoplay: true,
    showlrc: false,
    music: {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
    }
});
ap.init();

Options

{
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: true,                                                    // Optional, autoplay, not supported by mobile browsers
    showlrc: false,                                                    // Optional, show lrc
    music: {                                                           // Required, music info
        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'   // Required, music picture
    }
}

API

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

With lrc

Using LRC format

HTML:

<link rel="stylesheet" href="APlayer.min.css">
<!-- ... -->
<div id="player1" class="aplayer">
    <pre class="aplayer-lrc-content">
        [ti:平凡之路]
        [ar:朴树]
        [al:《后会无期》主题歌]
        [by:周敏]

        [00:00.00]平凡之路 - 朴树
        [00:04.01]作词：韩寒 朴树
        [00:08.02]作曲：朴树 编曲：朴树
        [00:12.02]徘徊着的 在路上的
        [00:17.37]你要走吗
        [00:23.20]易碎的 骄傲着
        [00:28.75]那也曾是我的模样
        <!-- ... -->
    </pre>
</div>
<!-- ... -->
<script src="APlayer.min.js"></script>