js实现手机端音频进度条拖拽

主要功能：
1、支持点击进度条调整播放的位置
2、显示音乐的播放时间
3、暂停播放等~

js

//以下显示的136为音频的总时长
var vm = new Vue({
    el: '#container',
    data: {
        progress_g_w:0,
        circle_w:0,
        pause:true,
        current_time:0,
        audio_w:'',
        audio_w_g:'',
        nowAudioTime:0,
    },
    created:function(){
    },
    mounted:function(){
        this.touch_move();
    },
    filters:{
        time:function(s){
            var MM = Math.floor(s / 60);
             var SS = s % 60;
             if (MM < 10)
               MM = "0" + MM;
             if (SS < 10)
               SS = "0" + SS;
             var min = MM + ":" + SS;
             return min.split('.')[0];
        }
    },
    methods: {
        audio_p:function(){
            var that=this;
            var audio_l=document.getElementById('audio');
            that.audio_w=document.querySelector('.progress').offsetWidth;
            var that = this;
            audio_l.addEventListener("timeupdate", function() {
                that.current_time = (audio_l.currentTime<=1)?1:audio_l.currentTime ;
                var scales = (audio_l.currentTime / 136)>=1?1:(audio_l.currentTime / 136);              
                that.progress_g_w = scales*100 +'%';
                that.audio_w_g=document.querySelector('.progress_g').offsetWidth;               
                //如果绿色进度条的宽度小于5px
                if(that.audio_w_g<=5){
                    that.circle_w = 0;
                }else if(that.audio_w_g>=(that.audio_w-5)){
                    that.circle_w = 'calc(100% - 10px)';
                }else{
                    that.circle_w = 'calc('+(scales*100) +'% - 5px)';
                }
            }, false)
            audio_l.addEventListener("ended", function() {  
                that.pause=true;
                audio_l.currentTime = 0;
                that.progress_g_w =0;
                that.current_time=0;
                that.circle_w = 0;
            }, false)
        },
        play:function(){//点击播放
            var that=this;
            var audio_l=document.getElementById('audio');
            if(audio_l.paused) {
                audio_l.play();
                that.audio_p();
                that.pause=false;               
            } else {                
                audio_l.pause();
                that.pause=true;
            }       
        },
        touch_move:function(){  //拖拉进度条     
            var that =this;
            var width = document.querySelector('.progress').offsetWidth;
            var audio=document.querySelector('audio');
            /*audio.addEventListener("loadedmetadata", function() {*/                       
            // 拖拽事件
            var touch = document.querySelector('.circle');
            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('.circle').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_g').style.width=nowLeft+"px";
                document.querySelector('.circle').style.left=(nowLeft-(nowLeft>(width-10)?10:5))+"px";
                var per = nowLeft/width;
                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;
            }
        /*})*/
            
    },

}
})

html

<div id="container">
            <div class="main_box">
                <div class="audio_box "><!--audio1-->
                    <div class="audio_detail">
                        <audio src="images/music.mp3" controls id="audio"></audio>
                        <b :class="{pause:!pause}" @click="play()"></b>
                        <div class="audio_p">
                            <div class="progress">
                                <div class="circle" v-bind:style="{ left: circle_w}"></div>
                                <div class="progress_g" v-bind:style="{ width: progress_g_w }"></div>
                            </div>
                            <div class="time clearfix">
                                <span>{{current_time | time}}</span>
                                <span><!--音频的时长--></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>          
        </div>

css

#audio{ 
  width: 0px;
  height:0px;
}
.audio_box{
    width: 100%;
    height: 1.23rem;
    /*background: url(../images/audio_2_03.png) no-repeat;*/
    background-size: 100% 100%;
    margin-top: 1.6rem;
}
.audio_box.audio1{
    height: .92rem;
    background: url(../images/audio1_06.png) no-repeat;
    background-size: 100% 100%;
}
.audio_box.audio1 .audio_txt{
    padding-top: .13rem;
}
.audio_box .audio_txt{
    font-size: .17rem;
    color: #ffffff;
    padding: .18rem .25rem 0 .5rem;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}
.audio_detail{
    padding-left: .5rem;
    position: relative;
    padding-right: .13rem;
    padding-top: .16rem;
}
.audio_detail b{
    display: block;
    position: absolute;
    width: .3rem;
    height: .3rem;
    background: url(../images/icon.png) no-repeat 0 0;
    background-size: 2.5rem;
    left: .12rem;
    top: .04rem;
}
.audio_detail b.pause{
    background: url(../images/icon.png) no-repeat 0 -.4rem;
    background-size: 2.5rem;
}
.audio_p{
    position: absolute;
    left: 0.5rem;
    top: .2rem;
    width: calc(100% - .63rem)
}
.progress{
    width: 100%;
    height: .02rem;
    border-radius: .02rem;
    background-color: white;
    position: relative;
}
.progress .circle{
    width: .1rem;
    height: .1rem;
    background: #41ff9d;
    position: absolute;
    border-radius: 50%;
    left: calc(30% - .05rem);
    top: -.04rem;
    position: relative;
}
.progress .circle:after{
    width: .3rem;
    height: .3rem;
    display: block;
    content: '';
    position: absolute;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.progress_g{
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: .02rem;
    border-radius: .02rem;
    background-color: #41ff9d;
}
.time span{
    float: left;
    font-size: .11rem;
    color: #45a08e;
    margin-top: .1rem;
}
.time span:nth-of-type(2){
    float: right;
}

未实现功能（音频加载完成之后才能拖拽）