夏雪冬花

马黑黑 · 发表于 2022-5-20 20:05

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-5-20 20:06

主要是演示一下如何使用新播放器按钮：

<style>
.wrap {
left: -30px;
width: 820px; height: 528px;
background: teal url('/data/attachment/forum/202205/20/200139juu3xx33cu31rp61.jpg') no-repeat center/cover;
position: relative;
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 80px; height: 80px;
left: 10px; bottom: 10px;
border: solid 6px transparent;
border-radius: 50%;
background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
font: normal 14px sans-serif;
position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
position: absolute; width: 2px; height: 50%;
bottom: 50%; background: rgba(200,20,20,.45);
transform-origin: bottom;
}
</style>
<div class="wrap">
<div class="circle" data-per="0%">
<div class="hand"></div>
</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2021/09/24/16249fde90a266e3a554e9324c83c3b8.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
hand.style.transform = `rotate(${360*prog/100}deg`;
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>