Skip to content

Commit 736043a

Browse files
DIYgodDIYgod
committed
optimized; handle loading and error; handle preload way
1 parent ef38996 commit 736043a

4 files changed

Lines changed: 42 additions & 35 deletions

File tree

‎APlayer.js‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ function APlayer(option) {
33
}
44

55
APlayer.prototype.init = function () {
6+
this.element = this.option.element;
7+
this.music = this.option.music;
8+
69
// 填充HTML
7-
this.option.element.innerHTML = ''
10+
this.element.innerHTML = ''
811
+ '<div class="aplayer-pic">'
9-
+ '<img src="' + this.option.music.pic + '">'
12+
+ '<img src="' + this.music.pic + '">'
1013
+ '<div class="aplayer-button aplayer-pause aplayer-hide">'
1114
+ '<i class="demo-icon aplayer-icon-pause"></i>'
1215
+ '</div>'
@@ -16,9 +19,9 @@ APlayer.prototype.init = function () {
1619
+ '</div>'
1720
+ '<div class="aplayer-info">'
1821
+ '<div class="aplayer-music">'
19-
+ '<a href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f=\'http://v.t.sina.com.cn/share/share.php?appkey=2992571369\',u=z||d.location,p=[\'&url=\',e(u),\'&title=\',e(t||d.title),\'&source=\',e(r),\'&sourceUrl=\',e(l),\'&content=\',c||\'gb2312\',\'&pic=\',e(p||\'\')].join(\'\');function%20a(){if(!window.open([f,p].join(\'\'),\'mb\',[\'toolbar=0,status=0,resizable=1,width=440,height=430,left=\',(s.width-440)/2,\',top=\',(s.height-430)/2].join(\'\')))u.href=[f,p].join(\'\');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,\'\',\'\',\'' + this.option.music.pic + '\',\'' + '#APlayer音乐分享# ' + this.option.music.title + ' - ' + this.option.music.author + ' \',\'\',\'\'));" title="分享至微博"><i class="demo-icon aplayer-icon-weibo"></i></a>'
20-
+ '<span class="aplayer-title">' + this.option.music.title + '</span>'
21-
+ '<span class="aplayer-author"> - ' + this.option.music.author + '</span>'
22+
+ '<a href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f=\'http://v.t.sina.com.cn/share/share.php?appkey=2992571369\',u=z||d.location,p=[\'&url=\',e(u),\'&title=\',e(t||d.title),\'&source=\',e(r),\'&sourceUrl=\',e(l),\'&content=\',c||\'gb2312\',\'&pic=\',e(p||\'\')].join(\'\');function%20a(){if(!window.open([f,p].join(\'\'),\'mb\',[\'toolbar=0,status=0,resizable=1,width=440,height=430,left=\',(s.width-440)/2,\',top=\',(s.height-430)/2].join(\'\')))u.href=[f,p].join(\'\');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,\'\',\'\',\'' + this.music.pic + '\',\'' + '#APlayer音乐分享# ' + this.music.title + ' - ' + this.music.author + ' \',\'\',\'\'));" title="分享至微博"><i class="demo-icon aplayer-icon-weibo"></i></a>'
23+
+ '<span class="aplayer-title">' + this.music.title + '</span>'
24+
+ '<span class="aplayer-author"> - (＞﹏＜)加载中,好累的说...</span>'
2225
+ '</div>'
2326
+ '<div class="aplayer-controller">'
2427
+ '<div class="aplayer-bar-wrap">'
@@ -45,17 +48,19 @@ APlayer.prototype.init = function () {
4548

4649
// 创建audio元素
4750
this.audio = document.createElement("audio");
48-
this.audio.src = this.option.music.url;
51+
this.audio.src = this.music.url;
4952
this.audio.loop = true;
53+
this.audio.preload = 'metadata';
5054

5155
// 显示音频总时间
5256
var _self = this;
5357
this.audio.addEventListener('durationchange', function() {
54-
_self.option.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
58+
_self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
5559
});
5660

57-
// 显示加载进度条
61+
// 可以播放, 取消loading样式, 显示加载进度条
5862
this.audio.addEventListener('canplay', function() {
63+
_self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + _self.music.author;
5964
_self.loadedTime = setInterval(function () {
6065
var percentage = _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration;
6166
_self.updateBar.call(_self, 'loaded', percentage, 'width');
@@ -65,9 +70,13 @@ APlayer.prototype.init = function () {
6570
}, 500);
6671
});
6772

73+
this.audio.addEventListener('error', function () {
74+
_self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + '加载失败 ╥﹏╥';
75+
});
76+
6877
// 播放暂停按钮
69-
this.playButton = this.option.element.getElementsByClassName('aplayer-play')[0];
70-
this.pauseButton = this.option.element.getElementsByClassName('aplayer-pause')[0];
78+
this.playButton = this.element.getElementsByClassName('aplayer-play')[0];
79+
this.pauseButton = this.element.getElementsByClassName('aplayer-pause')[0];
7180
this.playButton.addEventListener('click', function () {
7281
_self.play.call(_self);
7382
});
@@ -76,17 +85,17 @@ APlayer.prototype.init = function () {
7685
});
7786

7887
// 播放进度控制(拖拽滑块 点击进度条)
79-
this.playedBar = this.option.element.getElementsByClassName('aplayer-played')[0];
80-
this.loadedBar = this.option.element.getElementsByClassName('aplayer-loaded')[0];
81-
this.thumb = this.option.element.getElementsByClassName('aplayer-thumb')[0];
82-
this.bar = this.option.element.getElementsByClassName('aplayer-bar')[0];
88+
this.playedBar = this.element.getElementsByClassName('aplayer-played')[0];
89+
this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0];
90+
this.thumb = this.element.getElementsByClassName('aplayer-thumb')[0];
91+
this.bar = this.element.getElementsByClassName('aplayer-bar')[0];
8392
var barWidth;
8493
this.bar.addEventListener('click', function (event) {
8594
var e = event || window.event;
8695
barWidth = _self.bar.clientWidth;
8796
var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth;
8897
_self.updateBar.call(_self, 'played', percentage, 'width');
89-
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
98+
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
9099
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
91100
});
92101

@@ -103,7 +112,7 @@ APlayer.prototype.init = function () {
103112
percentage = percentage > 0 ? percentage : 0;
104113
percentage = percentage < 1 ? percentage : 1;
105114
_self.updateBar.call(_self, 'played', percentage, 'width');
106-
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
115+
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
107116
}
108117

109118
function thumbUp () {
@@ -112,17 +121,17 @@ APlayer.prototype.init = function () {
112121
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
113122
_self.playedTime = setInterval(function () {
114123
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
115-
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
124+
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
116125
}, 100);
117126
}
118127

119128
// 音量控制
120129
this.audio.volume = 0.8;
121-
this.volumeBar = this.option.element.getElementsByClassName('aplayer-volume')[0];
122-
var volumeBarWrap = this.option.element.getElementsByClassName('aplayer-volume-bar')[0];
123-
var volumeicon = _self.option.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];
130+
this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0];
131+
var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0];
132+
var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];
124133
var barHeight = 35;
125-
this.option.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) {
134+
this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) {
126135
var e = event || window.event;
127136
var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight;
128137
percentage = percentage > 0 ? percentage : 0;
@@ -190,7 +199,7 @@ APlayer.prototype.play = function () {
190199
var _self = this;
191200
this.playedTime = setInterval(function () {
192201
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
193-
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
202+
_self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
194203
}, 100);
195204
};
196205

‎README.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ The following HTML structure is used for APlayer:
2626
```
2727
<link rel="stylesheet" href="APlayer.css">
2828
<!-- ... -->
29-
<div id="player1" class="aplayer"></div>
29+
<div id="player1" class="aplayer">
30+
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
31+
</div>
3032
<!-- ... -->
3133
<script src="APlayer.js"></script>
3234
```
@@ -37,8 +39,6 @@ And this is how the APlayer is initialized:
3739
var ap = new APlayer({
3840
element: document.getElementById('player1'),
3941
autoplay: true,
40-
height: '66px',
41-
width: '100%',
4242
music: {
4343
title: 'Preparation',
4444
author: 'Hans Zimmer/Richard Harvey',
@@ -55,8 +55,6 @@ The following options are available:
5555
{
5656
element: document.getElementById('player1'),
5757
autoplay: true,
58-
height: '66px',
59-
width: '100%',
6058
music: {
6159
title: 'Preparation',
6260
author: 'Hans Zimmer/Richard Harvey',
@@ -76,7 +74,7 @@ API
7674
- [x] 播放进度拖拽控制
7775
- [x] 音量控制
7876
- [x] 分享到微博
79-
- [ ] 加载样式及错误处理
77+
- [x] 加载样式及错误处理
8078
- [ ] 窄样式
8179
- [ ] 宽度高度自定义
8280
- [ ] 播放列表

‎demo/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@
66
<link rel="stylesheet" href="../APlayer.css">
77
</head>
88
<body>
9-
<div id="player1" class="aplayer"></div>
9+
<div id="player1" class="aplayer">
10+
<div style="padding: 10px; font-size: 10px; text-align: center;">(＞﹏＜) APlayer 加载中,好累的说...</div>
11+
</div>
1012
<script src="../APlayer.js"></script>
1113
<script>
1214
var ap = new APlayer({
1315
element: document.getElementById('player1'),
14-
autoplay: true,
15-
height: '66px',
16-
width: '100%',
16+
autoplay: false,
1717
music: {
1818
title: 'Preparation',
1919
author: 'Hans Zimmer/Richard Harvey',
20-
url: 'Preparation.mp3',
21-
pic: 'https://dn-diygod.qbox.me/Preparation.jpg'
20+
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
21+
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
2222
}
2323
});
2424
ap.init();

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "aplayer",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"description": "Wow, such a beautiful html5 music player",
55
"main": "APlayer.js",
66
"scripts": {

0 commit comments

Comments
 (0)