如何用js/jquery获取音频播放进度并在记录模拟出播放进度
2017-03-22| 程成| 1831| 2| jQuery/JS

今天接到一个需求,需要在页面做到如下效果。


blob.png



在播放音频的同时,需要显示音频的播放进度,并且显示在页面上。


查资料,发现html5新增了audio标签,并且自带了duration和currentTime属性。

1、audio.duration获取音频时长,以秒为单位

2、audio.currentTime获取音频的播放进度


通过这两个属性,可以用jquery实现获取音频播放进度并记录的效果,大致代码如下:


<script type="text/javascript">
     $(function(){
     $("img,video,audio").css({
         width: '100%',
     });
     $(".audio").on('click', function(event) {
         event.preventDefault();
         var isplay = $("#bofang").val();
         var audio = document.getElementById('mp3');
         $("#audio").toggleClass('icon-audio-h');
         if (isplay == 0) {
             audio.play();
             timeout({$info.time});
             $("#bofang").val(1);
         } else {
             audio.pause();
             $(".bar").stop();
             $("#bofang").val(0);
         }
     });
 });
 
 function timeout(long){
     $(".bar").animate({'width': '100%'}, long, 'linear', function(){
         $(".bar").css({'width': '0%'});
         $("#audio").toggleClass('icon-audio-h');
         $("#bofang").val(0);
     });
 }
 
</script>


解释:在点击播放后,通过一个timeout方法(音频时长参数,我这里后台获取的,你也可以通过audio.duration),通过animate方法,在音频时长内,将bar的宽度从0加载到100%。点击暂停则通过$('bar').stop()暂停animate效果,非常有意思的一个小方法。


注:别忘了播放结束后,使用一个回调方法,将音频和进度条初始化。进度条的animate要使用linear,线性执行。


思考:

1、可不可以通过在点击开始播放的时候,获取当前播放进度;

2、算出在0.1秒内width应该animate的长度,并且执行;

3、暂停的话同样用stop暂停


理论上应该可以实现这种方法,后面有空会研究下这个方法。



×
作者:程成
QQ:492245711