使用CSS clip 屬性實現音頻播放圓環進度條

  忽然有需求要作一個圓環的音頻播放進度條（上圖效果），本身琢磨嘗試了半天，也沒有實現。最後度娘一下，才知道css還有一個clip屬性，完美實現需求。分享一下，說不定能幫其它小夥伴。至於有沒有用，那就不知道了，who care！OK，費話打住，Let's go!

CSS clip 屬性

  先簡單瞭解一下css clip屬性

說明

clip 屬性剪裁絕對定位元素。這個屬性用於定義一個剪裁矩形。對於一個絕對定義元素，在這個矩形內的內容纔可見。出了這個剪裁區域的內容會根據 overflow 的值來處理。

可能值

值	描述
shape	設置元素的形狀。惟一合法的形狀值是：rect (top, right, bottom, left)
auto	默認值。不該用任何剪裁。
inherit	規定應該從父元素繼承 clip 屬性的值。

來源 w3school

使用

  其實原理就是：經過剪裁使一個正方形div只顯示右半部分，再經過剪裁在這個div裏作一個帶邊框（邊框大小就是進度條的大小）的左半圓，由於div只顯示右半部分，正好將這個半圓剪裁掉了也就看不到了。而後結合rotate讓這個半圓旋轉，就實現了50%內的進度條，當超過50%時，取消對div的剪裁，再使用一個半圓來保存50%的進條，就實現一個100%的進度條效果。貼上代碼，而後再對關鍵代碼用註釋解釋。

/*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>

  完整的Demo,這裏用了我寫一個audioPlayPlugin.js,對audio標籤的經常使用操做進行了一些簡單的封裝。github地址,coding地址

  最後，有啥我沒說清楚或者說錯了的，歡迎你們留言，你們一塊兒學習，共同進步麼。