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

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

查资料，发现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暂停

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