音视频操作

 <!-- 音频播放一定要加播放控件(controls),不然不会展示 -->
    <audio src="小手拍拍.mp3" controls></audio><br>
    <button>播放/暂停</button>
    <button>查看媒体属性</button>
    <!-- 模拟进度条 -->
    <input class="vol" type="range" min="0" max="100" value="0">
    <!-- 模拟时长 -->
    <p class="time">
        <span>0:00</span> / <span>0:00</span>
    </p>
    <input type="range" class="progress" min="0" max="100" value="0">

 <script>
        var btn =document.querySelectorAll('button');
        var ad =document.querySelector('audio');
        var progress =document.querySelector('.progress');
        // paused 用于获取音频当前是否是暂停状态,boolean类型,只读
        //play()播放音视频
        // pause() 暂停音视频
        // load()重新加载音视频元素

        btn[0].onclick=function(){
            if(ad.paused){
                //暂停状态
                ad.play();
            }else{
                ad.pause();
            }
        }


        btn[1].onclick=function(){
            console.log('总时长',ad.duration);//只读
            console.log('当前时长',ad.currentTime);//可读写
            console.log('音量',ad.volume);//可读写  范围[0,1]
            console.log('倍速',ad.playbackRate);//当设置播放速率低于或高于浏览器内核规定的可用范围时,播放过程将静音.
        }


        //拖拽调节音量
        var vol=document.querySelector('.vol');
        vol.oninput=function(){
            ad.volume=vol.value/100;
        }



        //监听播放进度
        var span =document.querySelectorAll('.time span');
        //timeupdate:当currentTime更新时会触发此事件
        ad.ontimeupdate=function(){
            //获取当前时长
            var current =ad.currentTime;
            span[0].innerText=dealTime(current);
            var val =current/ad.duration*100;
            progress.value=val;
        }

        //canplay:当媒体加载完成,可以播放时触发
        ad.oncanplay=function(){
            span[1].innerText=dealTime(ad.duration)
        }

        //播放进度条的长短   当前时长/总时长


        progress.oninput =function(){
            var bit =this.value/100;
            ad.currentTime=ad.duration*bit
        }


        function dealTime(n){
            var m = Math.floor(n/60);
            var s =Math.floor(n%60);
            return `${m}:${s>=10? s :'0'+s}`
        }
    </script>