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

support multiple time tag

This commit is contained in:
DIYgod 2015-12-26 19:38:45 +08:00
parent 9080b73297
commit 99dccb3986
4 changed files with 99 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -84,7 +84,7 @@ ap.init();
```
[mm:ss.xx]lyric
[mm:ss.xx]lyric
[mm:ss.xx]lyric
[mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
...
```
@ -107,6 +107,16 @@ ap.init();
[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>

40
demo/index.html
View File

@ -70,24 +70,24 @@
[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]直到看见平凡才是唯一的答案
[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]直到看见平凡才是唯一的答案
[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]也哭也笑平凡着
[01:53.33][03:47.69]我曾经毁了我的一切
[01:56.54][03:50.84]只想永远地离开
[01:59.82][03:53.39]我曾经堕入无边黑暗
[02:02.14][03:56.29]想挣扎无法自拔
[02:04.79][03:59.04]我曾经像你像他像那野草野花
[02:10.54][04:04.79]绝望着 渴望着
[02:13.54][04:07.79]也哭也笑平凡着
[03:03.38]向前走 就这么走
[03:06.23]就算你被给过什么
[03:09.08]向前走 就这么走
@ -96,20 +96,6 @@
[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]我不过像你像他像那野草野花

2
dist/APlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

102
src/APlayer.js
View File

@ -1,3 +1,10 @@
/**
* APlayer constructor function
*
* @param {Object} option - See README
* @constructor
*/
function APlayer(option) {
// handle options error
if (!('music' in option && 'title' in option.music && 'author' in option.music && 'url' in option.music && 'pic' in option.music)) {
@ -29,31 +36,17 @@ function APlayer(option) {
this.option = option;
}
/**
* AutoLink initialization function
*/
APlayer.prototype.init = function () {
this.element = this.option.element;
this.music = this.option.music;
// parser lrc
if (this.option.showlrc) {
this.lrcTime = [];
this.lrcLine = [];
var lrcs = this.element.getElementsByClassName('aplayer-lrc-content')[0].innerHTML;
var lines = lrcs.split(/\n/);
var timeExp = /\[(\d{2}):(\d{2})\.(\d{2})]/;
var lrcExp = /](.*)$/;
var notLrcLineExp = /\[[A-Za-z]+:/;
for (var i = 0; i < lines.length; i++) {
lines[i] = lines[i].replace(/^\s+|\s+$/g, '');
var oneTime = timeExp.exec(lines[i]);
var oneLrc = lrcExp.exec(lines[i]);
if (oneTime && oneLrc && !lrcExp.exec(oneLrc[1])) {
this.lrcTime.push(parseInt(oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / 100);
this.lrcLine.push(oneLrc[1]);
}
else if (lines[i] && !notLrcLineExp.exec(lines[i])) {
throw 'APlayer Error: lrc format error : should be like `[mm:ss.xx]lyric` : ' + lines[i];
}
}
this.lrc = this.parseLrc(lrcs);
}
// fill in HTML
@ -103,8 +96,8 @@ APlayer.prototype.init = function () {
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>';
for (var i = 0; i < this.lrc.length; i++) {
lrcHTML += '<p>' + this.lrc[i][1] + '</p>';
}
this.lrcContents.innerHTML = lrcHTML;
this.lrcIndex = 0;
@ -265,7 +258,9 @@ APlayer.prototype.init = function () {
}
};
// play
/**
* Play music
*/
APlayer.prototype.play = function () {
this.playButton.classList.add('aplayer-hide');
this.pauseButton.classList.remove('aplayer-hide');
@ -280,7 +275,9 @@ APlayer.prototype.play = function () {
}, 100);
};
// pause
/**
* Pause music
*/
APlayer.prototype.pause = function () {
this.pauseButton.classList.add('aplayer-hide');
this.playButton.classList.remove('aplayer-hide');
@ -288,21 +285,31 @@ APlayer.prototype.pause = function () {
clearInterval(this.playedTime);
};
// update progress bar (loading progress bar, play progress bar)
/**
* Update progress bar, including loading progress bar and play progress bar
*
* @param {String} type - Point out which bar it is, should be played loaded or volume
* @param {Number} percentage
* @param {String} direction - Point out the direction of this bar, Should be height or width
*/
APlayer.prototype.updateBar = function (type, percentage, direction) {
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this[type + 'Bar'].style[direction] = percentage * 100 + '%';
};
// update lrc
/**
* Update lrc
*
* @param {Number} currentTime
*/
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])) {
if (currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) {
for (var i = 0; i < this.lrc.length; i++) {
if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {
this.lrcIndex = i;
this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)';
this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
@ -312,7 +319,12 @@ APlayer.prototype.updateLrc = function (currentTime) {
}
};
// format second to 00:00
/**
* Parse second to 00:00 format
*
* @param {Number} second
* @return {String} 00:00 format
*/
APlayer.prototype.secondToTime = function (second) {
var add0 = function (num) {
return num < 10 ? '0' + num : '' + num;
@ -320,4 +332,38 @@ APlayer.prototype.secondToTime = function (second) {
var min = parseInt(second / 60);
var sec = parseInt(second - min * 60);
return add0(min) + ':' + add0(sec);
};
/**
* Parse lrc, suppose multiple time tag
*
* @param {String} text - Format: [mm:ss.xx][mm:ss.xx]lyric
* @return {Array} [[time, text], [time, text], [time, text], ...]
*/
APlayer.prototype.parseLrc = function (text) {
var lyric = text.split('\n');
var lrc = [];
var lyricLen = lyric.length;
for (var i = 0; i < lyricLen; i++) {
// match lrc time
var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2})]/g);
// match lrc text
var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2})]/g, '').replace(/^\s+|\s+$/g, '');
if (lrcTimes != null) {
// handle multiple time tag
var timeLen = lrcTimes.length;
for (var j = 0; j < timeLen; j++) {
var oneTime = /\[(\d{2}):(\d{2})\.(\d{2})]/.exec(lrcTimes[j]);
var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / 100;
lrc.push([lrcTime, lrcText]);
}
}
}
// sort by time
lrc.sort(function (a, b) {
return a[0] - b[0];
});
return lrc;
};