/**
* APlayer constructor function
*
* @param {Object} option - See README
* @constructor
*/
function APlayer(option) {
this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
// compatibility: some mobile browsers don't suppose autoplay
if (this.isMobile) {
option.autoplay = false;
}
// default options
var defaultOption = {
element: document.getElementsByClassName('aplayer')[0],
narrow: false,
autoplay: false,
showlrc: false,
theme: '#b7daff'
};
for (var defaultKey in defaultOption) {
if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
option[defaultKey] = defaultOption[defaultKey];
}
}
// multiple music
this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1;
this.option = option;
this.audios = [];
this.loop = true;
}
/**
* AutoLink initialization function
*/
APlayer.prototype.init = function () {
this.element = this.option.element;
this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music;
// parser lrc
if (this.option.showlrc) {
var lrcs = [];
for (var i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {
lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);
}
this.lrcs = this.parseLrc(lrcs);
}
// fill in HTML
var eleHTML = ''
+ '
'
+ '
'
+ ''
+ '
'
+ '
'
+ ''
+ '
'
+ '
'
+ '
'
+ ''
+ ''
+ '
'
+ '
'
+ '
'
+ '
'
+ '
'
+ '
'
+ '
'
+ ''
+ '
'
+ '
'
+ '
'
+ '
'
+ ' -
00:00 /
00:00'
+ '
'
+ '
'
+ (this.playIndex > -1 ? '' : '')
+ '
'
+ '
'
+ '
'
+ '
';
for (i = 0; i < this.option.music.length; i++) {
eleHTML += ''
+ '- '
+ ''
+ '' + (i + 1) + ''
+ '' + this.option.music[i].title + ''
+ '' + this.option.music[i].author + ''
+ '
'
}
eleHTML += ''
+ '
'
+ '
' + this.lrc[i][1] + '
';
}
this.lrcContents.innerHTML = lrcHTML;
if (!this.lrcIndex) {
this.lrcIndex = 0;
}
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
this.lrcContents.style.transform = 'translateY(0px)';
this.lrcContents.style.webkitTransform = 'translateY(0px)';
}
// set duration time
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';
}
// autoplay
if (this.option.autoplay && !this.isMobile) {
this.play();
}
this.option.autoplay = true; // autoplay next music
if (this.isMobile) {
this.pause();
}
};
/**
* Play music
*/
APlayer.prototype.play = function () {
this.playButton.classList.add('aplayer-hide');
this.pauseButton.classList.remove('aplayer-hide');
this.audio.play();
var _self = this;
if (this.playedTime) {
clearInterval(this.playedTime);
}
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);
};
/**
* Pause music
*/
APlayer.prototype.pause = function () {
this.pauseButton.classList.add('aplayer-hide');
this.playButton.classList.remove('aplayer-hide');
this.audio.pause();
clearInterval(this.playedTime);
};
/**
* 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
*
* @param {Number} currentTime
*/
APlayer.prototype.updateLrc = function (currentTime) {
if (typeof(arguments[0]) === 'undefined') {
currentTime = this.audio.currentTime;
}
if (this.lrcIndex > this.lrc.length - 1 || 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.style.webkitTransform = 'translateY(' + -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');
}
}
}
};
/**
* 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;
};
var min = parseInt(second / 60);
var sec = parseInt(second - min * 60);
return add0(min) + ':' + add0(sec);
};
/**
* Parse lrc, suppose multiple time tag
*
* @param {Array} arr - Format:
* [mm:ss.xx]lyric
* [mm:ss.xxx]lyric
* [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
*
* @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...]
*/
APlayer.prototype.parseLrc = function (arr) {
var lrcs = [];
for (var k = 0; k < arr.length; k++) {
var lyric = arr[k].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,3})]/g);
// match lrc text
var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/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,3})]/.exec(lrcTimes[j]);
var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000);
lrc.push([lrcTime, lrcText]);
}
}
}
// sort by time
lrc.sort(function (a, b) {
return a[0] - b[0];
});
lrcs.push(lrc);
}
return lrcs;
};