function APlayer(option) { this.option = option; this.init(); } APlayer.prototype.init = function () { this.option.element.innerHTML = '' + '
' + '' + '
' + '' + '
' + '
' + '' + '
' + '
' + '
' + '
' + '' + this.option.music.title + '' + ' - ' + this.option.music.author + '' + '' + '
' + '
' + '
' + '
' + '
' + '
' + '' + '
' + '
' + '
' + ' - 00:00/00:00' + '
' + '
'; var _self = this; this.audio = document.createElement("audio"); this.audio.src = this.option.music.url; this.audio.loop = true; this.audio.addEventListener('durationchange', function() { _self.option.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration); }); this.audio.addEventListener('canplay', function() { _self.loadedTime = setInterval(function () { var percentage = _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration; _self.updateBar.call(_self, 'loaded', percentage); if (percentage === 1) { clearInterval(_self.loadedTime); } }, 500); }); this.playButton = this.option.element.getElementsByClassName('aplayer-play')[0]; this.pauseButton = this.option.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.option.element.getElementsByClassName('aplayer-played')[0]; this.loadedBar = this.option.element.getElementsByClassName('aplayer-loaded')[0]; 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); _self.option.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) { this[type + 'Bar'].style.width = percentage * 100 + '%'; }; 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); };