可拖动暂停的audio进度条

如果觉得定时器耗性能可以使用audio的ontimeupdate事件来实时监听audio的时间进度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>模板页</title>
    <style>
        header{
            position: relative;height:200px;background: pink;padding-top:0.1rem;text-align: center;
        }
        header .money{
            position: absolute;top:0;right:0;width:100px;height:30px;background: skyblue;text-align: center;line-height: 30px;
        }
        header img{
            width:50px;margin:0 auto;border-radius: 50%;
        }

        #audio-box{
            padding-top:20px;position:relative;height:100px;
        }
        #box{
            width:calc(100% - 20px);height:5px;background: #ccc;position:relative;margin: 0 auto;
        }
        #strip{
            width:0;height:5px;background:red;
        }
        #circular{
            width:20px;height:20px;background:skyblue;position:absolute;top:50%;left:0;border-radius: 50%;margin-top:-10px;
        }
        .time{
            position:absolute;right:0;top:0.15rem;
        }
        #play{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <section>
            <div><h6>【第01讲】小儿发烧在家如何做物理降温小儿发烧在家如何做物理降温</h6></div>
            <div id="audio-box">
                <div id="box">
                    <div id="strip"></div>
                    <div id="circular"></div>
                    <div class="time">{{voteTime | analysisTime}}</div>
                </div>
            </div>
            <div id="play">
                <img src="" alt="">
                播放
            </div>
            <h5 style="text-align: center">200人收听</h5>
            <div>
                <ul>
                    <li></li>
                </ul>
            </div>
        </section>
        <audio autobuffer id="audio">
            <source src="**放音频文件**">
        </audio>
    </div>
</body>
    <script src="../js/vue.min.js"></script>
    <script>
        Vue.filter('analysisTime', function (value) {
            return Math.floor(value/60)+'′'+Math.floor(value%60)+'″';
        })
        var vm = new Vue({
            el: '#app',
            created(){
                window.onload=function(){
                    var oAudio=document.querySelector('#audio');
                    var oDiv1=document.querySelector('#box');
                    var oDiv2=document.querySelector('#strip');
                    var oDiv3=document.querySelector('#circular');
                    var oPlay=document.querySelector('#play');
                    var timer='';
                    vm.voteTime = oAudio.duration;
                    oPlay.onclick=function(){
                        if(oAudio.paused){
                            oAudio.play();
                            oPlay.innerHTML='暂停'
                            timer=setInterval(function(){
                                playAudio(oAudio.currentTime/oAudio.duration)
                                vm.voteTime = oAudio.duration-oAudio.currentTime;
                            }, 100)
                        }else{
                            oAudio.pause();
                            oPlay.innerHTML='播放'
                            clearInterval(timer)
                        }
                        
                        
                    }
                    function playAudio(iNow){
                        oDiv2.style.width=iNow*100+'%';
                        oDiv3.style.left=iNow*100+'%';
                    }

                    oDiv3.addEventListener('touchstart',function(ev){
                        clearInterval(timer)
                        var oDiv1W = oDiv1.offsetWidth;
                        var oldX = ev.targetTouches[0].clientX - oDiv3.offsetLeft;

                        document.addEventListener('touchmove',fnMove,false)
                        document.addEventListener('touchend',fnEnd,false)
                        function fnMove(ev){
                            
                            var x = ev.targetTouches[0].clientX - oldX;
                            if(x>=oDiv1W){
                                x=oDiv1W;
                            }else if(x<=0){
                                x=0;
                            }
                            oDiv3.style.left=x+'px';
                            oDiv2.style.width=x+'px';

                        }
                        function fnEnd(ev){
                            document.removeEventListener('touchend',fnEnd,false)
                            document.removeEventListener('touchmove',fnMove,false)
                            var newX = ev.changedTouches[0].clientX;
                            var oDiv2W = oDiv2.offsetWidth;
                            var oDuration = oDiv2W/oDiv1W;
                            clearInterval(timer)
                            
                            oAudio.currentTime=oDuration*oAudio.duration;
                            timer=setInterval(function(){
                                playAudio(oAudio.currentTime/oAudio.duration)
                                vm.voteTime = oAudio.duration-oAudio.currentTime;
                            }, 100)
                            if(oAudio.paused){
                                vm.voteTime = oAudio.duration-oAudio.currentTime;
                                clearInterval(timer)
                            }
                        }
                    },false);
                }
            },
            data: {
                msg:'模板页',
                voteTime:0
            },
            methods: {

            }
        })
    </script>
</html>
可拖动暂停的audio进度条

推荐阅读更多精彩内容
