|
|

楼主 |
发表于 2023-7-20 21:06
|
显示全部楼层
代码
- <style>
- :root { --state: running; --prg: 0%; }
- #mplayer {
- position: absolute;
- left: 10px;
- top: 10px;
- width: 200px;
- height: 40px;
- background: linear-gradient(to right,red var(--prg),tan 0) repeat-x 0 50% / 100% 2px;
- }
- #mplayer::before, #mplayer::after {
- position: absolute;
- top: 28%;
- font-size: 14px;
- }
- #mplayer::before {
- content: attr(data-cu);
- left: -50px;
- }
- #mplayer::after {
- content: attr(data-du);
- right: -50px;
- }
- #btnplay {
- position: absolute;
- left: calc(var(--prg) - 15px);
- bottom: 0;
- font: normal 30px sans-serif;
- cursor: pointer;
- animation: swing .3s infinite linear var(--state);
- }
- @keyframes swing {
- from { transform: rotate(90deg) skew(-5deg); }
- to { transform: rotate(90deg) skew(5deg); }
- }
- </style>
- <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
- <div id="btnplay" title="暂停/播放">🐞</div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1990857214" loop autoplay></audio>
- <script>
- (function() {
- let root = document.querySelector(':root');
- 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 = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('play', mState, false);
- aud.addEventListener('timeupdate', () => {
- root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
- mplayer.dataset.cu = toMin(aud.currentTime);
- mplayer.dataset.du = toMin(aud.duration);
- });
- btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
- mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
- })();
- </script>
复制代码
|
|