|
|

楼主 |
发表于 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>
复制代码
|
|