黑氏时钟播放器

马黑黑

00:00

马黑黑

代码：

1. <style>
   
2. #clock {
   
3.         --ww: 120px; --state: paused; --deg: 0; --deg: 0s;
   
4.         position: relative;
   
5.         width: var(--ww);
   
6.         height: var(--ww);
   
7.         color: #eee;
   
8.         text-shadow: 1px 1px 2px #000;
   
9.         border: 6px solid #333;
   
10.         border-radius: 50%;
    
11.         cursor: pointer;
    
12.         display: grid;
    
13.         place-items: center;
    
14. }
    
15. #clock::before, #clock::after {
    
16.         position: absolute;
    
17.         content: '';
    
18.         width: 6px;
    
19.         height: calc(var(--ww) / 2 - 2px);
    
20.         border-radius: 50%;
    
21. }
    
22. #clock::before {
    
23.         background: hsla(0,90%,40%,.65);
    
24.         bottom: 50%;
    
25.         transform-origin: 50% 100%;
    
26.         transform: rotate(var(--deg));
    
27. }
    
28. #clock::after {
    
29.         top: 50%;
    
30.         background: hsla(0,0%,0%,.75);
    
31.         transform-origin: 100% 0;
    
32.         animation: swing .3s infinite alternate linear var(--state);
    
33. }
    
34. @keyframes swing { from { transform: rotate(15deg); } to {transform: rotate(-15deg); } }
    
35. </style>
    
36. 
    
37. <div id="clock">00:00</div>
    
38. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=106017" autoplay loop></audio>
    
39. 
    
40. <script>
    
41. 
    
42. 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;};
    
43. let mState = () => clock.style.setProperty('--state', aud.paused ? 'pasued' : 'running');
    
44. aud.addEventListener('play', () => mState());
    
45. aud.addEventListener('pause', () => mState());
    
46. clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
47. aud.addEventListener('timeupdate', () => {
    
48.         let deg = 360*aud.currentTime / aud.duration;
    
49.         clock.style.setProperty('--deg', deg +'deg');
    
50.         clock.innerText = toMin(aud.currentTime) + ' - ' +  toMin(aud.duration);
    
51. });
    
52. 
    
53. </script>

复制代码

马黑黑

单元素时钟播放器：时钟外壳是主元素，进度指针是 ::before 伪元素，节拍指针是 ::after 伪元素。

节拍指针通过 swing 关键帧动画实现；进度指针、文本进度通过监听 audio 的 timeupdate 时间驱动。

貌似不复杂哈

马黑黑

醉美水芙蓉 发表于 2023-3-13 21:38
黑黑老师速度好快！这么快一个播放器就出来了！

做过系列时钟，这个做起来不难

马黑黑

醉美水芙蓉 发表于 2023-3-13 21:38
播放器简单好听！

歌曲不错

红影

下面的指针在摆动，上面的指针在走动。漂亮

马黑黑

红影 发表于 2023-3-13 22:30
下面的指针在摆动，上面的指针在走动。漂亮

小辣椒

黑黑，这时钟是准备后面做时钟播放器吧，这个刻度没有的，上次那时钟有刻度但不是播放器，又进一步改进了

小辣椒

音乐特别的抒情，好听

马黑黑

小辣椒 发表于 2023-3-13 23:01
黑黑，这时钟是准备后面做时钟播放器吧，这个刻度没有的，上次那时钟有刻度但不是播放器，又进一步改进了

刻度不是必须的

马黑黑

小辣椒 发表于 2023-3-13 23:01
音乐特别的抒情，好听

不错的

庶民

给我耳目一新的感觉，学习了！

马黑黑

庶民 发表于 2023-3-14 04:48
给我耳目一新的感觉，学习了！

感谢支持

樵歌

双开始赠送小牛牛们小礼物了

马黑黑

樵歌 发表于 2023-3-14 07:38
双开始赠送小牛牛们小礼物了

早

樵歌

马黑黑 发表于 2023-3-14 07:39
早

都早

马黑黑

樵歌 发表于 2023-3-14 07:43
都早

我七点半才起来，不早

梦油

这两个指针度在动啊