js---手机端滑动进度条

最近做项目，有一个滑动音乐播放进度条的效果，但是使用input的 range 来做会出现一些问题，想了想还是用JS来写。直接上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.progress{position: relative; width:300px;margin:100px auto;}
.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
.progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
.progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
.progress_btn:hover{border-color:#F7B824;}
</style>
</head>
<body>
    <div class="progress">
        <div class="progress_bg">
            <div class="progress_bar"></div>
        </div>
        <div class="progress_btn"></div>
        <div class="text">0%</div>
    </div>
    <script type="text/javascript">
        var that =this;
        var width = document.querySelector('.progress').offsetWidth;
        var audio=document.querySelector('audio');
        /*audio.addEventListener("loadedmetadata", function() {*/                       
        // 拖拽事件
        var touch = document.querySelector('.progress_btn');
        touch.addEventListener("touchstart",handleStart,false); // 触摸开始
        touch.addEventListener("touchmove",handleMove,false); // 开始移动
        touch.addEventListener("touchend",handleEnd,false); // 触摸结束
        var x1,y1,oldTime,newTime,olfLeft,newLeft;
        function handleStart(e){
            e.preventDefault();
            var touches = e.changedTouches;
            x1 = touches[0].pageX;
            y1 = touches[0].pageY;
            olfLeft = document.querySelector('.progress_btn').offsetLeft;
            // document.getElementById("audio").pause();
            // that.pause=true;
        }
        function handleMove(e){
            e.preventDefault();
            var x2 = e.changedTouches[0].pageX;
            var y2 = e.changedTouches[0].pageY;
            newLeft = x2-x1;
            nowLeft = olfLeft+newLeft;
            if(nowLeft<0){
                nowLeft = 0;
            }
            if(nowLeft>width){
                nowLeft = width;
            }
            document.querySelector('.progress_bar').style.width=nowLeft+"px";
            document.querySelector('.progress_btn').style.left=(nowLeft-(nowLeft>(width-10)?10:5))+"px";
            var per = nowLeft/width;
            console.log(per);
            // that.nowAudioTime = 136 * per;//音频应该显示的时间
            // that.current_time=that.nowAudioTime;
            // audio.currentTime = that.nowAudioTime;              
        }
        function handleEnd(e){
            touch.removeEventListener("touchmove",handleEnd,false);
            // document.querySelector('audio').currentTime = that.nowAudioTime;
            // console.log(document.querySelector('audio').currentTime);
            // document.querySelector('audio').play();
            // that.pause=false;
        }
    </script>
</body>
</html>