Wow, such a beautiful html5 music player
Introduction
UI 参考网易云音乐外链播放器
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,
theme: '#e6d0b2',
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 song(s), not supported by mobile browsers
showlrc: false, // Optional, show lrc
mutex: true, // Optional, pause other players when this player playing
theme: '#e6d0b2', // Optional, theme color, default: #b7daff
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' // Optional, music picture
}
}
API
ap.init()
ap.play()
ap.pause()
Work with module bundler
var APlayer = require('APlayer');
var ap = new APlayer({...});
With lrc
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
...
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]那也曾是我的模样
[00:34.55]沸腾着的 不安着的
[00:40.26]你要去哪
[00:46.00]谜一样的 沉默着的
[00:51.75]故事你真的在听吗
[00:56.25][03:25.78][04:10.64]我曾经跨过山和大海
[00:59.55][03:28.14][04:13.54]也穿过人山人海
[01:02.70][03:30.44]我曾经拥有着一切
[01:05.00][03:33.69]转眼都飘散如烟
[01:07.75][03:36.24]我曾经失落失望失掉所有方向
[01:13.46][03:42.04]直到看见平凡才是唯一的答案
<!-- ... -->
</pre>
</div>
<!-- ... -->
<script src="APlayer.min.js"></script>
JS:
Option:
showlrc: true
With playlist
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
-
from https://github.com/DIYgod/APlayer