CSS クリップを使用してオーディオ再生リング プログレス バーを実装するチュートリアルの例

突然、リングオーディオプレーヤープログレスバーを作成する必要があります（上の写真のエフェクト）。長い間考えてきましたが、実現できませんでした。最後に、母に確認したところ、CSS にも clipattribute があることがわかりました。これはニーズを完全に満たしています。共有すれば、他の友達にも役立つかもしれません。それが役に立つかどうかはわかりませんが、誰が気にするでしょうか。 OK、話はやめて、行きましょう!

CSS クリップ属性

CSS クリップ属性を簡単に理解しましょう

説明

クリップ属性は、絶対配置された要素をクリップします。このプロパティは、クリッピング四角形を定義するために使用されます。絶対的に定義された要素の場合、四角形内のコンテンツのみが表示されます。このクリッピング領域外のコンテンツは、オーバーフローの値に従って処理されます。

shape 要素の形状を設定します。唯一の有効な形状値は、rect (上、右、下、左)

auto デフォルト値です。クリッピングは適用されません。

inherit は、clip 属性の値が親要素から継承されることを指定します。

使用

実際の原理は、正方形のpにクリッピングで右半分だけを表示させ、そのpにクリッピングで枠線付きの左半円（枠線のサイズはプログレスバーのサイズ）を作成するというものです。 , p は右半分だけを表示するので、この半円を切り取るだけで見えなくなります。次に、回転を組み合わせて半円を回転させ、進行状況バーが 50% を超えたら、p のクリッピングをキャンセルして、半円を使用して進行状況バーの 50% を保存し、100% の進行状況バーを実現します。 。コードを貼り付けて、キーコードをコメントで説明します。

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

完全なデモ。ここでは、オーディオ タグの一般的な操作を単純にカプセル化する audioPlayPlugin.js を作成しました。 Github アドレス、コーディング アドレス

最後に、私が明確に説明していないことや間違ったことを言った場合は、メッセージを残していただければ、一緒に学び、一緒に進歩することができます。

【関連推奨事項】

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード

2. CSS オンラインビデオチュートリアル

3. Jiijian (2) - CSS ビデオチュートリアル

以上がCSS クリップを使用してオーディオ再生リング プログレス バーを実装するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。