今天接到一个需求,需要在页面做到如下效果。
在播放音频的同时,需要显示音频的播放进度,并且显示在页面上。
查资料,发现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暂停
理论上应该可以实现这种方法,后面有空会研究下这个方法。