'
@@ -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 加载中,好累的说...
+