利用CSSclip实现音频播放圆环进度条教程实例

/*Css部分*/
.circleProgress_wrapper{/*设置圆环的大小*/
 margin: auto;
 width: 200px;
 height: 200px;
 border-radius: 50%;
 cursor: pointer;
}
.slice{ /*这是一个裁去了左半部分，只显示右半部分的p*/
 position: absolute; /*必须是绝对定位元素，clip属性才会有效*/
 width: 100%;
 height: 100%;
 clip:rect(0,200px,200px,100px);/*top:0,right:200,bottom:200,left:100裁剪出右半部*/
}
.slice.gt50{/*当进度超过50%时，取消剪裁*/
 clip:rect(auto,auto,auto,auto);
}
.bar,.fill{ /*两个只显示左半部分的半圆*/
 position: absolute;
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 border: 4px rgba(255, 249, 0, 0.77) solid;/*设置进度条大小和颜色值*/
 border-radius: 50%;
 clip: rect(0,100px,200px,0);/*top:0,right:100,bottom:200,left:0裁剪出左半部*/
}
.slice.gt50 .fill{/*当进度超过50%时，让fill旋转180度填充50%*/
 trans
for
m: rotate(180deg);
}
<!--html 部分 -->
<p class="circleProgress_wrapper">
 <p id="slice_wrapper" class="slice"> 
 <p class="bar pre50"></p>
 <p class="fill"></p>
 </p>
</p>
//javscript部分
<script type="text/
javascript
" src="src/audioPlayPlugin.
js
"></script>
<script>
var bar=
document
.querySelector(".slice>.bar"),
 process=0,
 circleProgress=document.querySelector(".circleProgress_wrapper"),
 slice=document.getElementById("slice_wrapper");
var audio=
new
 audioController({ //创建一个音频
对象
 src:"
file
/test1.mp3",
 "
time
up
date
":function(){//监听timeupdate
事件
，也就是音频当前播放进度发生改变响应的事件
 /*
 *audio.getAttr("
current
Time" 获取当前播放的时间 s
 *audio.getAttr("duration") 获取音频时长
 *它们的比正好就是当前播放进度
 *再乘以360转换为进度条应该旋转的角度
 */
 process=audio.getAttr("currentTime")/audio.getAttr("duration")*360;
 parseInt(process)===180&&add
Class
(slice,"gt50");//当等于50%时，使用fill占满50%的进度条
 bar.style="transform:rotate("+(process)+"deg)";//根据播放进度设置
更新
进度条
 }
 }
 });
circleProgress.addEvent
List
ener("click",function(){ //点击播放
 if(audio.getAttr("paused")){ 
 audio.play()
 }
else
{
 audio.pause()
 }
 });
 function addClass(element,className){/*添加类名，完整代码已省略*/
 ...
 }
</script>