control progress

APlayer.css

@@ -71,6 +71,10 @@
     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);
     border-radius: 2px;
     height: 66px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .aplayer-pic {
@@ -178,7 +182,7 @@
 }
 
 .aplayer-bar-wrap {
-    margin-right: 100px;
+    margin-right: 110px;
 }
 
 .aplayer-bar {
@@ -186,6 +190,7 @@
     height: 2px;
     width: 100%;
     background: #cdcdcd;
+    cursor: pointer;
 }
 
 .aplayer-loaded {
@@ -221,6 +226,10 @@
     cursor: pointer;
 }
 
+.aplayer-thumb:hover {
+    background: #b7daff;
+}
+
 .aplayer-time {
     position: absolute;
     right: 0;

APlayer.js

@@ -65,6 +65,56 @@ APlayer.prototype.init = function () {
     if (this.option.autoplay) {
         this.play();
     }
+
+    this.thumb = this.option.element.getElementsByClassName('aplayer-thumb')[0];
+    this.bar = this.option.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 - getElementLeft(_self.bar)) / barWidth;
+        _self.updateBar.call(_self, 'played', percentage);
+        _self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
+        _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
+    });
+
+    this.thumb.addEventListener('mousedown', function (event) {
+        var e = event || window.event;
+        barWidth = _self.bar.clientWidth;
+        clearInterval(_self.playedTime);
+        document.addEventListener('mousemove', thumbMove);
+        document.addEventListener('mouseup', thumbUp);
+    });
+
+    function thumbMove (event) {
+        var e = event || window.event;
+        var percentage = (e.clientX - getElementLeft(_self.bar)) / barWidth;
+        percentage = percentage > 0 ? percentage : 0;
+        percentage = percentage < 1 ? percentage : 1;
+        _self.updateBar.call(_self, 'played', percentage);
+        _self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
+    }
+
+    function thumbUp () {
+        document.removeEventListener('mouseup', thumbUp);
+        document.removeEventListener('mousemove', thumbMove);
+        _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);
+            _self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
+        }, 100);
+    }
+
+    function getElementLeft (element){
+        var actualLeft = element.offsetLeft;
+        var current = element.offsetParent;
+        while (current !== null){
+            actualLeft += current.offsetLeft;
+            current = current.offsetParent;
+        }
+        return actualLeft;
+    }
 };
 
 APlayer.prototype.play = function () {
@@ -86,6 +136,8 @@ APlayer.prototype.pause = function () {
 };
 
 APlayer.prototype.updateBar = function (type, percentage) {
+    percentage = percentage > 0 ? percentage : 0;
+    percentage = percentage < 1 ? percentage : 1;
     this[type + 'Bar'].style.width = percentage * 100 + '%';
 };
 

README.md

@@ -8,7 +8,7 @@ Wow, such a beautiful html5 music player
 
 ## Introduction
 
-[Demo(暂无)](https://www.anotherhome.net/file/APlayer)
+[Demo](https://www.anotherhome.net/file/APlayer)
 
 ## Install
 
@@ -69,9 +69,15 @@ API
 
 ## Todo
 
-- [ ] 播放进度拖拽控制
+- [x] 播放进度拖拽控制
 - [ ] 音量控制
 - [ ] 分享到微博
+- [ ] 播放列表
+- [ ] 歌词展示
+
+## Issues
+
+- [ ] 在 Firefox 中调整进度后，播放到最后时音乐总时间会自动变长
 
 
 ## LICENSE

demo/index.html

@@ -17,7 +17,7 @@
             music: {
                 title: 'Preparation',
                 author: 'Hans Zimmer/Richard Harvey',
-                url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
+                url: 'Preparation.mp3',
                 pic: 'Preparation.jpg'
             }
         });