突然（効果以上）オーディオ再生プログレスバーの輪を行うには需要がある、達成されていない、長い時間のために自分の彼女にしてみてください。あなたのお母さんの最後に、どの程度、クリップCSSプロパティ、需要の完璧な実現がある知っています。、あなたと共有多分他の小さなパートナーを助けます。何の使用がないので、私は気に誰が、知りません！OK、料金は、その後、一時停止、レッツ・ゴー！
CSSクリッププロパティ
まずクイックルックCSSクリッププロパティ
説明
クリップカットプロパティは絶対に要素を配置します。この属性は、クリッピング領域を定義するために使用されます。以下のために絶対定義要素、この矩形内のコンテンツが表示されています。クリップ領域これはオーバーフローの値に従って処理されるであろう。
可能な値
値 説明 形状 形状要素を設定します。のみ正当フォーム値は：RECT（上、右、下、左） オート デフォルト値。任意のカットを適用しないでください。 継承 提供は親要素からクリップ属性の値を継承する必要があります。
使用
実際には、原則は次のとおりです。div要素のみを示し、右半分ので、正方形のカットは右半分のみを表示DIVすることによって、その後のカットは、DIVに（境界線のサイズは、プログレスバーのサイズである）の境界線との半円によって行うことだけ左に半円形のカットアウトは、それが表示されます。次いで、合わせた回転は、100％のプログレスバーを達成するために、粉々に50％を保存するために半円を使用して、DIVのトリミングをキャンセルし、時に50％以上、50％以内にプログレスバーを達成するために、回転の半円を聞かせて効果。コメントをコードし、キーコードインタプリタを貼り付けます。
/*Css部分*/
.circleProgress_wrapper{/*设置圆环的大小*/
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
cursor: pointer;
}
.slice{ /*这是一个裁去了左半部分，只显示右半部分的div*/
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%*/
transform: rotate(180deg);
}<!--html 部分 -->
<div class="circleProgress_wrapper">
<div id="slice_wrapper" class="slice">
<div class="bar pre50"></div>
<div class="fill"></div>
</div>
</div>//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",
"timeupdate":function(){//监听timeupdate事件，也就是音频当前播放进度发生改变响应的事件
/*
*audio.getAttr("currentTime" 获取当前播放的时间 s
*audio.getAttr("duration") 获取音频时长
*它们的比正好就是当前播放进度
*再乘以360转换为进度条应该旋转的角度
*/
process=audio.getAttr("currentTime")/audio.getAttr("duration")*360;
parseInt(process)===180&&addClass(slice,"gt50");//当等于50%时，使用fill占满50%的进度条
bar.style="transform:rotate("+(process)+"deg)";//根据播放进度设置更新进度条
}
}
});
circleProgress.addEventListener("click",function(){ //点击播放
if(audio.getAttr("paused")){
audio.play()
}else{
audio.pause()
}
});
function addClass(element,className){/*添加类名，完整代码已省略*/
...
}
</script>
完全なデモは、ここで私と一緒にaudioPlayPlugin.jsを書くために、一般的な操作のためのオーディオラベルは、いくつかの簡単なパッケージを行いました。githubのアドレス、アドレスコーディング
最後に、私が間違っているか、あなたがメッセージを残すために歓迎されているものをクリアしていなかった、我々はそれを一緒に進行、一緒に勉強します。
：この記事はで再現されたAPE▷2048 https://www.mk2048.com/blog/blog.php?id=haki2012h1j