xiaoxue_admin
/
APlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show LRC!!!

This commit is contained in:
DIYgod 2015-11-28 00:13:35 +08:00
parent a1192ac731
commit 3c66d806d9
9 changed files with 304 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
README.md
View File

@ -23,7 +23,7 @@ npm install aplayer
## Usage
The following HTML structure is used for APlayer:
### The following HTML structure is used for APlayer:
```
<link rel="stylesheet" href="APlayer.css">
@ -35,13 +35,14 @@ The following HTML structure is used for APlayer:
<script src="APlayer.js"></script>
```
And this is how the APlayer is initialized:
### And this is how the APlayer is initialized:
```
var ap = new APlayer({
element: document.getElementById('player1'),
narrow: false,
autoplay: true,
showlrc: false,
music: {
title: 'Preparation',
author: 'Hans Zimmer/Richard Harvey',
@ -52,12 +53,47 @@ var ap = new APlayer({
ap.init();
```
API
### With lrc
Using [LRC format](https://en.wikipedia.org/wiki/LRC_(file_format))
HTML:
```
<link rel="stylesheet" href="APlayer.css">
<!-- ... -->
<div id="player1" class="aplayer">
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
<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.js"></script>
```
JS:
Init Option: `showlrc: false`
### API
+ `ap.play()`
+ `ap.pause()`
Development
### Development
```
gulp

98
demo/index.html
View File

@ -51,11 +51,82 @@
<h2>Wow, such a beautiful html5 music player</h2>
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/APlayer" target="_blank">GitHub</a>. Licensed MIT.</p>
<hr>
<h3>Wide style and autoplay</h3>
<h3>With lyrics</h3>
<div id="player3" class="aplayer">
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
<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]我曾经跨过山和大海
[00:59.55]也穿过人山人海
[01:02.70]我曾经拥有着一切
[01:05.00]转眼都飘散如烟
[01:07.75]我曾经失落失望失掉所有方向
[01:13.46]直到看见平凡才是唯一的答案
[01:31.70]当你仍然
[01:33.10]还在幻想
[01:37.40]你的明天
[01:43.00]她会好吗 还是更烂
[01:49.78]对我而言是另一天
[01:53.33]我曾经毁了我的一切
[01:56.54]只想永远地离开
[01:59.82]我曾经堕入无边黑暗
[02:02.14]想挣扎无法自拔
[02:04.79]我曾经像你像他像那野草野花
[02:10.54]绝望着 渴望着
[02:13.54]也哭也笑平凡着
[03:03.38]向前走 就这么走
[03:06.23]就算你被给过什么
[03:09.08]向前走 就这么走
[03:11.83]就算你被夺走什么
[03:14.78]向前走 就这么走
[03:17.58]就算你会错过什么
[03:20.33]向前走 就这么走
[03:23.13]就算你会
[03:25.78]我曾经跨过山和大海
[03:28.14]也穿过人山人海
[03:30.44]我曾经拥有着一切
[03:33.69]转眼都飘散如烟
[03:36.24]我曾经失落失望失掉所有方向
[03:42.04]直到看见平凡才是唯一的答案
[03:47.69]我曾经毁了我的一切
[03:50.84]只想永远地离开
[03:53.39]我曾经堕入无边黑暗
[03:56.29]想挣扎无法自拔
[03:59.04]我曾经像你像他像那野草野花
[04:04.79]绝望着 渴望着 也哭也笑平凡着
[04:10.64]我曾经跨过山和大海
[04:13.54]也穿过人山人海
[04:16.14]我曾经问遍整个世界
[04:19.49]从来没得到答案
[04:22.88]我不过像你像他像那野草野花
[04:27.64]冥冥中这是我 唯一要走的路啊
[04:34.65]时间无言
[04:36.15]如此这般
[04:40.30]明天已在眼前
[04:46.45]风吹过的 路依然远
[04:51.55]你的故事讲到了哪
</pre>
</div>
<h3>Wide style</h3>
<div id="player1" class="aplayer">
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
</div>
<h3>Narrow style and no autoplay</h3>
<h3>Narrow style</h3>
<div id="player2" class="aplayer">
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
</div>
@ -65,12 +136,12 @@
var ap1 = new APlayer({
element: document.getElementById('player1'),
narrow: false,
autoplay: true,
autoplay: 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'
url: 'Preparation.mp3',
pic: 'Preparation.jpg'
}
});
ap1.init();
@ -81,11 +152,24 @@
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'
url: 'Preparation.mp3',
pic: 'Preparation.jpg'
}
});
ap2.init();
var ap3 = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '平凡之路',
author: '朴树',
url: '平凡之路.mp3',
pic: '平凡之路.jpg'
}
});
ap3.init();
</script>
</body>
</html>

BIN
demo/平凡之路.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
demo/平凡之路.mp3 Normal file
View File

Binary file not shown.

2
dist/APlayer.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/APlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "aplayer",
"version": "1.0.8",
"version": "1.1.0",
"description": "Wow, such a beautiful html5 music player",
"main": "APlayer.js",
"scripts": {

68
src/APlayer.js
View File

@ -6,6 +6,25 @@ APlayer.prototype.init = function () {
this.element = this.option.element;
this.music = this.option.music;
// parser lrc
if (this.option.showlrc) {
var lines = [];
this.lrcTime = [];
this.lrcLine = [];
var lrcs = this.element.getElementsByClassName('aplayer-lrc-content')[0].innerHTML;
lines = lrcs.split(/\n/);
var timeExp = /\[(\d{2})\:(\d{2})\.(\d{2})\]/;
var lrcExp = /](.*)$/;
for (var i = 0; i < lines.length; i++) {
var oneTime = timeExp.exec(lines[i]);
var oneLrc = lrcExp.exec(lines[i]);
if (oneTime && oneLrc) {
this.lrcTime.push(parseInt(oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / 100);
this.lrcLine.push(oneLrc[1]);
}
}
}
// fill in HTML
this.element.innerHTML = ''
+ '<div class="aplayer-pic">'
@ -19,10 +38,12 @@ APlayer.prototype.init = function () {
+ '</div>'
+ '<div class="aplayer-info">'
+ '<div class="aplayer-music">'
+ '<a href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f=\'http://v.t.sina.com.cn/share/share.php?appkey=2992571369\',u=z||d.location,p=[\'&url=\',e(u),\'&title=\',e(t||d.title),\'&source=\',e(r),\'&sourceUrl=\',e(l),\'&content=\',c||\'gb2312\',\'&pic=\',e(p||\'\')].join(\'\');function%20a(){if(!window.open([f,p].join(\'\'),\'mb\',[\'toolbar=0,status=0,resizable=1,width=440,height=430,left=\',(s.width-440)/2,\',top=\',(s.height-430)/2].join(\'\')))u.href=[f,p].join(\'\');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,\'\',\'\',\'' + this.music.pic + '\',\'' + '#APlayer音乐分享# ' + this.music.title + ' - ' + this.music.author + ' \',\'\',\'\'));" title="分享至微博"><i class="demo-icon aplayer-icon-weibo"></i></a>'
+ '<span class="aplayer-title">' + this.music.title + '</span>'
+ '<span class="aplayer-author"> - (＞﹏＜)加载中,好累的说...</span>'
+ '</div>'
+ '<div class="aplayer-lrc">'
+ '<div class="aplayer-lrc-contents" style="top: 0"></div>'
+ '</div>'
+ '<div class="aplayer-controller">'
+ '<div class="aplayer-bar-wrap">'
+ '<div class="aplayer-bar">'
@ -32,7 +53,7 @@ APlayer.prototype.init = function () {
+ '</div>'
+ '</div>'
+ '</div>'
+ '<span class="aplayer-time">'
+ '<div class="aplayer-time">'
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
+ '<div class="aplayer-volume-wrap">'
+ '<i class="demo-icon aplayer-icon-volume-down"></i>'
@ -42,10 +63,23 @@ APlayer.prototype.init = function () {
+ '</div>'
+ '</div>'
+ '</div>'
+ '</span>'
+ '</div>'
+ '</div>'
+ '</div>';
// fill in lrc
if (this.option.showlrc) {
this.element.classList.add('aplayer-withlrc');
var lrcHTML = '';
this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
for (i = 0; i < this.lrcLine.length; i++) {
lrcHTML += '<p>' + this.lrcLine[i] + '</p>';
}
this.lrcContents.innerHTML = lrcHTML;
this.lrcIndex = 0;
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
}
// switch to narrow style
if (this.option.narrow) {
this.element.classList.add('aplayer-narrow');
@ -117,6 +151,9 @@ APlayer.prototype.init = function () {
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
_self.updateBar.call(_self, 'played', percentage, 'width');
if (_self.option.showlrc) {
_self.updateLrc.call(_self, parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration);
}
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
}
@ -124,10 +161,7 @@ APlayer.prototype.init = function () {
document.removeEventListener('mouseup', thumbUp);
document.removeEventListener('mousemove', thumbMove);
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
_self.playedTime = setInterval(function () {
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
}, 100);
_self.play();
}
// control volume
@ -204,6 +238,9 @@ APlayer.prototype.play = function () {
var _self = this;
this.playedTime = setInterval(function () {
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
if (_self.option.showlrc) {
_self.updateLrc.call(_self);
}
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
}, 100);
};
@ -223,6 +260,23 @@ APlayer.prototype.updateBar = function (type, percentage, direction) {
this[type + 'Bar'].style[direction] = percentage * 100 + '%';
};
// update lrc
APlayer.prototype.updateLrc = function (currentTime) {
if (!currentTime) {
currentTime = this.audio.currentTime;
}
if (currentTime < this.lrcTime[this.lrcIndex] || currentTime >= this.lrcTime[this.lrcIndex + 1]) {
for (var i = 0; i < this.lrcTime.length; i++) {
if (currentTime >= this.lrcTime[i] && (!this.lrcTime[i + 1] || currentTime < this.lrcTime[i + 1])) {
this.lrcIndex = i;
this.lrcContents.style.top = -this.lrcIndex * 20 + 'px';
this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
}
}
}
};
// format second to 00:00
APlayer.prototype.secondToTime = function (second) {
var add0 = function (num) {

140
src/APlayer.scss
View File

@ -1,4 +1,6 @@
$aplayer-height: 66px;
$lrc-height: 40px;
$aplayer-height-lrc: $aplayer-height + $lrc-height;
@font-face {
font-family: 'aplayer-fontello';
@ -18,12 +20,29 @@ $aplayer-height: 66px;
}
}
.aplayer-withlrc {
&.aplayer-narrow {
width: $aplayer-height-lrc;
}
&.aplayer .aplayer-pic {
height: $aplayer-height-lrc;
width: $aplayer-height-lrc;
}
&.aplayer .aplayer-info {
margin-left: $aplayer-height-lrc;
height: $aplayer-height-lrc;
}
&.aplayer .aplayer-lrc {
display: block;
}
}
.aplayer {
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
border-radius: 2px;
height: $aplayer-height;
overflow: hidden;
user-select: none;
[class^="aplayer-icon-"]:before, [class*=" aplayer-icon-"]:before {
@ -83,16 +102,19 @@ $aplayer-height: 66px;
cursor: default !important;
}
.aplayer-lrc-content {
display: none;
}
.aplayer-pic {
position: relative;
float: left;
height: 100%;
height: $aplayer-height;
width: $aplayer-height;
img {
height: 100%;
width: 100%;
border-radius: 2px 0 0 2px;
}
.aplayer-button {
@ -147,7 +169,9 @@ $aplayer-height: 66px;
.aplayer-info {
margin-left: $aplayer-height;
padding: 17px 7px 0 10px;
padding: 14px 7px 0 10px;
height: $aplayer-height;
box-sizing: border-box;
.aplayer-music {
overflow: hidden;
@ -178,7 +202,7 @@ $aplayer-height: 66px;
position: relative;
.aplayer-bar-wrap {
margin-right: 120px;
margin: 0 120px 0 5px;
.aplayer-bar {
position: relative;
@ -208,7 +232,7 @@ $aplayer-height: 66px;
.aplayer-thumb {
position: absolute;
top: 0;
right: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 8px;
@ -238,43 +262,97 @@ $aplayer-height: 66px;
color: #666;
font-size: 15px;
}
}
.aplayer-volume-wrap {
display: inline-block;
margin-left: 7px;
cursor: pointer !important;
.aplayer-volume-wrap {
display: inline-block;
margin-left: 7px;
cursor: pointer !important;
&:hover .aplayer-volume-bar-wrap {
display: block;
}
&:hover .aplayer-volume-bar-wrap {
display: block;
}
.aplayer-volume-bar-wrap {
display: none;
.aplayer-volume-bar-wrap {
display: none;
position: absolute;
bottom: 17px;
right: -5px;
width: 25px;
height: 40px;
.aplayer-volume-bar {
position: absolute;
bottom: 17px;
right: -5px;
width: 25px;
height: 40px;
bottom: 0;
right: 10px;
width: 5px;
height: 35px;
background: #aaa;
.aplayer-volume-bar {
.aplayer-volume {
position: absolute;
bottom: 0;
right: 10px;
right: 0;
width: 5px;
height: 35px;
background: #aaa;
.aplayer-volume {
position: absolute;
bottom: 0;
right: 0;
width: 5px;
background: #b7daff;
}
background: #b7daff;
}
}
}
}
}
}
.aplayer-lrc {
display: none;
position: relative;
height: $lrc-height;
background: #fff;
text-align: center;
overflow: hidden;
margin: -10px 0 10px;
&:before {
position: absolute;
top: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 10%;
content: ' ';
background: linear-gradient(to bottom, #fff, transparent);
}
&:after {
position: absolute;
bottom: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 33%;
content: ' ';
background: linear-gradient(to top, #fff, transparent);
}
p {
font-size: 12px;
color: #666;
line-height: 20px;
padding: 0;
margin: 0;
transition: all 0.5s ease-out;
opacity: 0.4;
&.aplayer-lrc-current {
opacity: 1;
}
}
.aplayer-lrc-contents {
position: absolute;
width: 100%;
transition: all 0.5s ease-out;
}
}
}