diff --git a/APlayer.js b/APlayer.js index 8938d71..b2ae770 100644 --- a/APlayer.js +++ b/APlayer.js @@ -3,10 +3,13 @@ function APlayer(option) { } APlayer.prototype.init = function () { + this.element = this.option.element; + this.music = this.option.music; + // 填充HTML - this.option.element.innerHTML = '' + this.element.innerHTML = '' + '
' - + '' + + '' + '
' + '' + '
' @@ -16,9 +19,9 @@ APlayer.prototype.init = function () { + '
' + '
' + '
' - + '' - + '' + this.option.music.title + '' - + ' - ' + this.option.music.author + '' + + '' + + '' + this.music.title + '' + + ' - (>﹏<)加载中,好累的说...' + '
' + '
' + '
' @@ -45,17 +48,19 @@ APlayer.prototype.init = function () { // 创建audio元素 this.audio = document.createElement("audio"); - this.audio.src = this.option.music.url; + this.audio.src = this.music.url; this.audio.loop = true; + this.audio.preload = 'metadata'; // 显示音频总时间 var _self = this; this.audio.addEventListener('durationchange', function() { - _self.option.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration); + _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'); @@ -65,9 +70,13 @@ APlayer.prototype.init = function () { }, 500); }); + this.audio.addEventListener('error', function () { + _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + '加载失败 ╥﹏╥'; + }); + // 播放暂停按钮 - this.playButton = this.option.element.getElementsByClassName('aplayer-play')[0]; - this.pauseButton = this.option.element.getElementsByClassName('aplayer-pause')[0]; + 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); }); @@ -76,17 +85,17 @@ APlayer.prototype.init = function () { }); // 播放进度控制(拖拽滑块 点击进度条) - this.playedBar = this.option.element.getElementsByClassName('aplayer-played')[0]; - this.loadedBar = this.option.element.getElementsByClassName('aplayer-loaded')[0]; - this.thumb = this.option.element.getElementsByClassName('aplayer-thumb')[0]; - this.bar = this.option.element.getElementsByClassName('aplayer-bar')[0]; + 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.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); + _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; }); @@ -103,7 +112,7 @@ APlayer.prototype.init = function () { percentage = percentage > 0 ? percentage : 0; percentage = percentage < 1 ? percentage : 1; _self.updateBar.call(_self, 'played', percentage, 'width'); - _self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); + _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); } function thumbUp () { @@ -112,17 +121,17 @@ APlayer.prototype.init = function () { _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.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); + _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); }, 100); } // 音量控制 this.audio.volume = 0.8; - this.volumeBar = this.option.element.getElementsByClassName('aplayer-volume')[0]; - var volumeBarWrap = this.option.element.getElementsByClassName('aplayer-volume-bar')[0]; - var volumeicon = _self.option.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0]; + 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.option.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) { + 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; @@ -190,7 +199,7 @@ APlayer.prototype.play = function () { var _self = this; this.playedTime = setInterval(function () { _self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width'); - _self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); + _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); }, 100); }; diff --git a/README.md b/README.md index fdb5462..5abf118 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,9 @@ The following HTML structure is used for APlayer: ``` -
+
+
(>﹏<) APlayer 加载中,好累的说...
+
``` @@ -37,8 +39,6 @@ And this is how the APlayer is initialized: var ap = new APlayer({ element: document.getElementById('player1'), autoplay: true, - height: '66px', - width: '100%', music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', @@ -55,8 +55,6 @@ The following options are available: { element: document.getElementById('player1'), autoplay: true, - height: '66px', - width: '100%', music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', @@ -76,7 +74,7 @@ API - [x] 播放进度拖拽控制 - [x] 音量控制 - [x] 分享到微博 -- [ ] 加载样式及错误处理 +- [x] 加载样式及错误处理 - [ ] 窄样式 - [ ] 宽度高度自定义 - [ ] 播放列表 diff --git a/demo/index.html b/demo/index.html index a0df719..03d64b6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,19 +6,19 @@ -
+
+
(>﹏<) APlayer 加载中,好累的说...
+