Skip to content

Commit ec87f25

Browse files
DIYgodDIYgod
committed
control progress
1 parent 137c40f commit ec87f25

4 files changed

Lines changed: 71 additions & 4 deletions

File tree

‎APlayer.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@
7171
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
7272
border-radius: 2px;
7373
height: 66px;
74+
-webkit-user-select: none;
75+
-moz-user-select: none;
76+
-ms-user-select: none;
77+
user-select: none;
7478
}
7579

7680
.aplayer-pic {
@@ -178,14 +182,15 @@
178182
}
179183

180184
.aplayer-bar-wrap {
181-
margin-right: 100px;
185+
margin-right: 110px;
182186
}
183187

184188
.aplayer-bar {
185189
position: relative;
186190
height: 2px;
187191
width: 100%;
188192
background: #cdcdcd;
193+
cursor: pointer;
189194
}
190195

191196
.aplayer-loaded {
@@ -221,6 +226,10 @@
221226
cursor: pointer;
222227
}
223228

229+
.aplayer-thumb:hover {
230+
background: #b7daff;
231+
}
232+
224233
.aplayer-time {
225234
position: absolute;
226235
right: 0;

‎APlayer.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,56 @@ APlayer.prototype.init = function () {
6565
if (this.option.autoplay) {
6666
this.play();
6767
}
68+
69+
this.thumb = this.option.element.getElementsByClassName('aplayer-thumb')[0];
70+
this.bar = this.option.element.getElementsByClassName('aplayer-bar')[0];
71+
var barWidth;
72+
73+
this.bar.addEventListener('click', function (event) {
74+
var e = event || window.event;
75+
barWidth = _self.bar.clientWidth;
76+
var percentage = (e.clientX - getElementLeft(_self.bar)) / barWidth;
77+
_self.updateBar.call(_self, 'played', percentage);
78+
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
79+
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
80+
});
81+
82+
this.thumb.addEventListener('mousedown', function (event) {
83+
var e = event || window.event;
84+
barWidth = _self.bar.clientWidth;
85+
clearInterval(_self.playedTime);
86+
document.addEventListener('mousemove', thumbMove);
87+
document.addEventListener('mouseup', thumbUp);
88+
});
89+
90+
function thumbMove (event) {
91+
var e = event || window.event;
92+
var percentage = (e.clientX - getElementLeft(_self.bar)) / barWidth;
93+
percentage = percentage > 0 ? percentage : 0;
94+
percentage = percentage < 1 ? percentage : 1;
95+
_self.updateBar.call(_self, 'played', percentage);
96+
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
97+
}
98+
99+
function thumbUp () {
100+
document.removeEventListener('mouseup', thumbUp);
101+
document.removeEventListener('mousemove', thumbMove);
102+
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
103+
_self.playedTime = setInterval(function () {
104+
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration);
105+
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
106+
}, 100);
107+
}
108+
109+
function getElementLeft (element){
110+
var actualLeft = element.offsetLeft;
111+
var current = element.offsetParent;
112+
while (current !== null){
113+
actualLeft += current.offsetLeft;
114+
current = current.offsetParent;
115+
}
116+
return actualLeft;
117+
}
68118
};
69119

70120
APlayer.prototype.play = function () {
@@ -86,6 +136,8 @@ APlayer.prototype.pause = function () {
86136
};
87137

88138
APlayer.prototype.updateBar = function (type, percentage) {
139+
percentage = percentage > 0 ? percentage : 0;
140+
percentage = percentage < 1 ? percentage : 1;
89141
this[type + 'Bar'].style.width = percentage * 100 + '%';
90142
};
91143

‎README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Wow, such a beautiful html5 music player
88

99
## Introduction
1010

11-
[Demo(暂无)](https://www.anotherhome.net/file/APlayer)
11+
[Demo](https://www.anotherhome.net/file/APlayer)
1212

1313
## Install
1414

@@ -69,9 +69,15 @@ API
6969

7070
## Todo
7171

72-
- [ ] 播放进度拖拽控制
72+
- [x] 播放进度拖拽控制
7373
- [ ] 音量控制
7474
- [ ] 分享到微博
75+
- [ ] 播放列表
76+
- [ ] 歌词展示
77+
78+
## Issues
79+
80+
- [ ] 在 Firefox 中调整进度后，播放到最后时音乐总时间会自动变长
7581

7682

7783
## LICENSE

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
music: {
1818
title: 'Preparation',
1919
author: 'Hans Zimmer/Richard Harvey',
20-
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
20+
url: 'Preparation.mp3',
2121
pic: 'Preparation.jpg'
2222
}
2323
});

0 commit comments

Comments
 (0)