Wow, such a beautiful html5 music player
UI 参考网易云音乐外链播放器
Screenshot
$ npm install aplayer --save
<link rel="stylesheet" href="APlayer.min.css">
<!-- ... -->
<div id="player1" class="aplayer"></div>
<!-- ... -->
<script src="APlayer.min.js"></script>var ap = new APlayer(option);
ap.init();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
}
}ap.init()ap.play()ap.pause()
ap.on(event, handler)
event:
play: Triggered when APlayer start playpause: Triggered when APlayer pausedcanplay: Triggered when enough data is available that APlayer can be playedplaying: Triggered periodically when APlayer is playingended: Triggered when APlayer endederror: Triggered when an error occurs
var APlayer = require('APlayer');
var ap = new APlayer({
// ...
});Show lrc, you can put LRC in JS or HTML as you like.
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
...
JS:
{
showlrc: 1,
music: {
lrc: '[00:00.00]lrc here\n[00:01.00]aplayer' // lrc here, separate lines with \n
}
}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>Show multiple music.
Option:
music: [
{
title: '',
author: '',
url: '',
pic: ''
},
{
title: '',
author: '',
url: '',
pic: ''
},
...
]$ npm install
$ npm run dev
$ npm install
$ npm run build
MIT © DIYgod