Tutorial example of using CSS clip to implement audio playback ring progress bar

I suddenly had the need to make a ring AudioPlaybackProgress bar (the effect in the picture above). I thought about it and tried for a long time, but it didn't come true. Finally, I checked my mother and found out that css also has a clip attribute, which perfectly meets the needs. Share it, maybe it can help other friends. As for whether it is useful, I don’t know, who cares! OK, stop talking, let's go!

CSS clip property

 Let's briefly understand the css clip property

Explanation

The clip property clips absolutely positioned elements. This property is used to define a clipping rectangle. For an absolutely defined element, only the content within the rectangle is visible. Content outside this clipping area will be processed according to the value of overflow.

shape Set the shape of the element. The only legal shape values ​​are: rect (top, right, bottom, left)

auto Default value. No clipping is applied.

inherit Specifies that the value of the clip attribute should be inherited from the parent element.

Using

The principle is actually: make a square p display only the right half through clipping, and then make a border in this p through clipping (the size of the border is the size of the progress bar) The left semicircle, because p only displays the right half, this semicircle is cropped and cannot be seen. Then combine rotate to rotate the semicircle to achieve a progress bar within 50%. When it exceeds 50%, cancel the clipping of p, and then use a semicircle to save 50% of the progress bar to achieve a 100% progress bar. Effect. Paste the code, and then explain the key code with comments.

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

Complete Demo, here I wrote an audioPlayPlugin.js, which simply encapsulates the common operations of audio tags. Github address, coding address

Finally, if there is anything I didn’t explain clearly or said wrongly, you are welcome to leave a message so that we can learn together and make progress together.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Tutorial example of using CSS clip to implement audio playback ring progress bar. For more information, please follow other related articles on the PHP Chinese website!