|
|

楼主 |
发表于 2023-7-22 23:17
|
显示全部楼层
代码
- <style>
- #mydiv { margin: 30px auto; width: 600px; height: 300px; background: radial-gradient(tan,olive); position: relative; }
- #prog {
- position: absolute;
- bottom: 10px;
- left: calc(50% - 150px);
- width: 300px;
- height: 8px;
- border: 1px solid lightblue;
- border-radius: 10px;
- background: linear-gradient(to right, green, red var(--prg), white 0);
- color: lightgreen;
- --prg: 0%; --state: paused;
- }
- #prog::before, #prog::after { position: absolute; top: -30px; }
- #prog::before { content: attr(data-cu); }
- #prog::after { right: 0; content: attr(data-du); }
- #btnplay {
- position: absolute;
- top: -42px;
- left: calc(50% - 17.5px);
- width: 35px;
- height: 35px;
- background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -110px -8px;
- cursor: pointer;
- animation: rot 6s infinite linear var(--state);
- }
- @keyframes rot { to { transform: rotate(1turn); } }
- </style>
- <div id="mydiv">
- <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度"><span id="btnplay" title="播放/暂停"></span></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051744489" autoplay loop></audio>
- </div>
- <script>
- let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
- let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('play', mState, false);
- aud.addEventListener('timeupdate', () => {
- prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
- prog.dataset.cu = toMin(aud.currentTime);
- prog.dataset.du = toMin(aud.duration);
- });
- btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
- prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
- </script>
复制代码
|
|