Use CSS propriedade do clipe para reprodução de áudio anel barra de progresso

  De repente, há uma demanda para fazer um círculo de áudio barra de progresso de reprodução (acima de efeito), tente sozinha por um longo tempo, não foram alcançados. Finalmente, o grau de sua mãe, para saber que há uma propriedade do clipe de css, a perfeita realização da demanda. Compartilhar com você, talvez ajudar outros pequenos parceiros. Como não há nenhum uso, eu não sei, que se importam! OK, taxa, em seguida, fez uma pausa, Deixe-nos ir!

propriedade CSS clipe

  Primeiro um clip propriedades css olhar rápido

explicação

propriedade do clipe de elementos de corte absolutamente posicionado. Este atributo é utilizado para definir um rectângulo de recorte. Para um elementos de definição absolutos , o conteúdo dentro deste retângulo é visível. A área clipe isso será tratado de acordo com o valor do excesso.

Os valores possíveis

valor	descrição
forma	Definir o elemento forma. O valor única forma legítima é: rect (topo, direita, inferior, esquerda)
auto	Os valores padrão. Não aplique qualquer corte.
herdar	Devem herdar o valor do atributo clipe do elemento pai.

w3school fonte

uso

  Na verdade, o princípio é: fazendo um corte div show de praça apenas a metade direita, em seguida, corte a fazer por um semicírculo com uma borda (tamanho da borda é o tamanho da barra de progresso) no div, porque div mostrar apenas a metade direita, apenas o do recorte semi-circular irá ver. Em seguida combinado de rotação deixar o semicírculo de rotação, para alcançar uma barra de progresso em 50%, quando mais do que 50 por cento, cancelar o aparamento da div, em seguida, usar um semicírculo para poupar 50% em pedaços, para alcançar uma barra de progresso 100% efeito. Cole o código, e, em seguida, o intérprete key-código com um comentário.

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

  Completa de demonstração , aqui comigo para escrever uma audioPlayPlugin.js, etiqueta de áudio para operações comuns realizado algum pacote simples. endereço github , endereço de Codificação

  Finalmente, eu não estava claro o que está errado ou você está convidado a deixar uma mensagem, vamos estudar juntos, progredir juntos lo.

Este artigo é reproduzido em: macaco ▷ 2048 https://www.mk2048.com/blog/blog.php?id=haki2012h1j