function APlayer(option) { this.option = option; } APlayer.prototype.init = function () { this.element = this.option.element; this.music = this.option.music; // å¡«å……HTML this.element.innerHTML = '' + '
'
+ '
'
+ ''
+ ''
+ '
'
+ '';
// 创建audioå…ƒç´
this.audio = document.createElement("audio");
this.audio.src = this.music.url;
this.audio.loop = true;
this.audio.preload = 'metadata';
// 显示音频总时间
var _self = this;
this.audio.addEventListener('durationchange', function() {
_self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
});
// å¯ä»¥æ’放, å–消loadingæ ·å¼, æ˜¾ç¤ºåŠ è½½è¿›åº¦æ¡
this.audio.addEventListener('canplay', function() {
_self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + _self.music.author;
_self.loadedTime = setInterval(function () {
var percentage = _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration;
_self.updateBar.call(_self, 'loaded', percentage, 'width');
if (percentage === 1) {
clearInterval(_self.loadedTime);
}
}, 500);
});
this.audio.addEventListener('error', function () {
_self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'åŠ è½½å¤±è´¥ â•¥ï¹â•¥';
});
// æ’放暂åœæŒ‰é’®
this.playButton = this.element.getElementsByClassName('aplayer-play')[0];
this.pauseButton = this.element.getElementsByClassName('aplayer-pause')[0];
this.playButton.addEventListener('click', function () {
_self.play.call(_self);
});
this.pauseButton.addEventListener('click', function () {
_self.pause.call(_self);
});
// æ’放进度控制(æ‹–æ‹½æ»‘å— ç‚¹å‡»è¿›åº¦æ¡)
this.playedBar = this.element.getElementsByClassName('aplayer-played')[0];
this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];
this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0];
this.bar = this.element.getElementsByClassName('aplayer-bar')[0];
var barWidth;
this.bar.addEventListener('click', function (event) {
var e = event || window.event;
barWidth = _self.bar.clientWidth;
var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth;
_self.updateBar.call(_self, 'played', percentage, 'width');
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
});
this.thumb.addEventListener('mousedown', function () {
barWidth = _self.bar.clientWidth;
clearInterval(_self.playedTime);
document.addEventListener('mousemove', thumbMove);
document.addEventListener('mouseup', thumbUp);
});
function thumbMove (event) {
var e = event || window.event;
var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
_self.updateBar.call(_self, 'played', percentage, 'width');
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
}
function thumbUp () {
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);
}
// 音é‡æŽ§åˆ¶
this.audio.volume = 0.8;
this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0];
var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0];
var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];
var barHeight = 35;
this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) {
var e = event || window.event;
var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight;
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
_self.updateBar.call(_self, 'volume', percentage, 'height');
_self.audio.volume = percentage;
if (_self.audio.muted) {
_self.audio.muted = false;
}
if (percentage === 1) {
volumeicon.className = 'demo-icon aplayer-icon-volume-up';
}
else {
volumeicon.className = 'demo-icon aplayer-icon-volume-down';
}
});
volumeicon.addEventListener('click', function () {
if (_self.audio.muted) {
_self.audio.muted = false;
volumeicon.className = _self.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down';
_self.updateBar.call(_self, 'volume', _self.audio.volume, 'height');
}
else {
_self.audio.muted = true;
volumeicon.className = 'demo-icon aplayer-icon-volume-off';
_self.updateBar.call(_self, 'volume', 0, 'height');
}
});
// 获å–å…ƒç´ ç›¸å¯¹çª—å£ä½ç½®
function getElementViewLeft (element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
var elementScrollLeft;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
return actualLeft - elementScrollLeft;
}
function getElementViewTop (element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
var elementScrollTop;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
return actualTop - elementScrollTop;
}
// 自动æ’放
if (this.option.autoplay) {
this.play();
}
};
// æ’放
APlayer.prototype.play = function () {
this.playButton.classList.add('aplayer-hide');
this.pauseButton.classList.remove('aplayer-hide');
this.audio.play();
var _self = this;
this.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);
};
// æš‚åœ
APlayer.prototype.pause = function () {
this.pauseButton.classList.add('aplayer-hide');
this.playButton.classList.remove('aplayer-hide');
this.audio.pause();
clearInterval(this.playedTime);
};
// 更新进度æ¡(åŠ è½½è¿›åº¦æ¡ æ’放进度æ¡)
APlayer.prototype.updateBar = function (type, percentage, direction) {
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this[type + 'Bar'].style[direction] = percentage * 100 + '%';
};
// 将秒数整ç†ä¸º 00:00 æ ¼å¼
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);
};