css-doodle播放控制器

马黑黑

:doodle { @grid: 2 / 300px 70px; background: tan; --prog: 0%; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --state: paused; } /* 时间信息 : 左 */ /* 时间信息 : 左 */ @nth(1) { @place: 25% 70%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: 40px; @shape: clover 4; @place: 50% 35%; background: crimson; cursor: pointer; animation: rot 6s infinite linear var(--state); } /* 时间信息 : 右 */ @nth(3) { @place: 75% 70%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 75%; @size: 100% 4px; background: gray; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: crimson; } cursor: pointer; } @keyframes rot { to { transform: rotate(1turn); } }

马黑黑

源码

1. <css-doodle id="mplayer">
   
2.         :doodle {
   
3.                 @grid: 2 / 300px 70px;
   
4.                 background: tan;
   
5.                 --prog: 0%; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --state: paused;
   
6.         }
   
7.         /* 时间信息 : 左 */
   
8.         @nth(1) {
   
9.                 @place: 25% 70%;
   
10.                 :after { content: var(--ttmsg1); }
    
11.         }
    
12.         /* 控制器 */
    
13.         @nth(2) {
    
14.                 @size: 40px;
    
15.                 @shape: clover 4;
    
16.                 @place: 50% 35%;
    
17.                 background: crimson;
    
18.                 cursor: pointer;
    
19.                 animation: rot 6s infinite linear var(--state);
    
20.         }
    
21.         /* 时间信息 : 右 */
    
22.         @nth(3) {
    
23.                 @place: 75% 70%;
    
24.                 :after { content: var(--ttmsg2); }
    
25.         }
    
26.         /* 进度条 */
    
27.         @nth(4) {
    
28.                 @place: 50% 75%;
    
29.                 @size: 100% 4px;
    
30.                 background: gray;
    
31.                 display: grid;
    
32.                 place-items: center start;
    
33.                 :before {
    
34.                         content: '';
    
35.                         width: var(--prog);
    
36.                         height: 100%;
    
37.                         background: crimson;
    
38.                 }
    
39.                 cursor: pointer;
    
40.         }
    
41.         @keyframes rot { to { transform: rotate(1turn); } }
    
42. </css-doodle>
    
43. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=488388710" autoplay loop></audio>
    
44. 
    
45. <script>
    
46. (function() {
    
47.         let script = document.createElement('script');
    
48.         script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    
49.         document.head.appendChild(script);
    
50.         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;};
    
51.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
52.         aud.addEventListener('play', mState, false);
    
53.         aud.addEventListener('pause', mState, false);
    
54.         aud.addEventListener('timeupdate', () => {
    
55.                 mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
    
56.                 mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
    
57.                 mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
    
58.         });
    
59.         mplayer.onclick = (e) => {
    
60.                 if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
    
61.                 if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
    
62.         }
    
63. })();
    
64. </script>

复制代码

马黑黑

JS动态传递CSS变量值给单元格伪元素，之前曾断言不可行，晚饭后再研究了一阵子，终于解决问题。技巧是，所传递的值必须带小角引号，单引号双引号不论，前后配套就好。

具体实现代码在：

① 05行，声明 --ttmsg1 和 --ttmsg2 两个CSS变量；
② 10行和24行，两个单元格的伪元素分别调用 --ttmsg1 和 --ttmsg2 变量；
③ 55、56行分别对这两个变量赋值，赋值方式加了小角单引号。

起个网名好难

马黑黑 发表于 2023-5-10 22:42
JS动态传递CSS变量值给单元格伪元素，之前曾断言不可行，晚饭后再研究了一阵子，终于解决问题。技巧是，所 ...

请教，小角单引号是么意思？

mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);    前两行是传入字符串要加引号
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)   这行是传入数值不用引号

是不是这意思。

起个网名好难

学习……

马黑黑

起个网名好难 发表于 2023-5-10 23:13
小角单引号是么意思？

mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);     ...

对。单元格的 content 属性，接受JS传递的变量，需要放在引号里，否则不成功

亦是金

先收藏，慢慢学习，体会，模仿，试用！谢谢老师的教程！

红影

终于可以用css-doodle做出播放器了，黑黑研究得真深

红影

这个也能拉动播放进度呢，只是有些数值没看明白，比如if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) ，这里面的数值不知道哪来的

马黑黑

红影 发表于 2023-5-11 10:34
这个也能拉动播放进度呢，只是有些数值没看明白，比如if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY ...

这些数值要用一个公式来替换，这里暂且这么办而已，是根据各自的位置决定的

马黑黑

亦是金 发表于 2023-5-10 23:25
先收藏，慢慢学习，体会，模仿，试用！谢谢老师的教程！

马黑黑

醉美水芙蓉 发表于 2023-5-11 06:36
问候老师早上好！

中午好

马黑黑

红影 发表于 2023-5-11 10:27
终于可以用css-doodle做出播放器了，黑黑研究得真深

还行

南无月

小播放器看上去小巧可爱，代码却不少。看来css-doodle画图可以变得简单之极，牵涉交互就复杂了。

红影

马黑黑 发表于 2023-5-11 12:16
这些数值要用一个公式来替换，这里暂且这么办而已，是根据各自的位置决定的

哦，这个让人有点迷糊。

红影

马黑黑 发表于 2023-5-11 12:17
还行

看着代码挺复杂，还不如之前的呢

马黑黑

红影 发表于 2023-5-11 14:57
看着代码挺复杂，还不如之前的呢

怎么说呢？你不能因为《巴黎圣母院》字数之多定义其为啰嗦，也不能因为《道德经》才五千字而认为它不全。

马黑黑

红影 发表于 2023-5-11 14:57
哦，这个让人有点迷糊。

涉及到几何问题。

马黑黑

南无月 发表于 2023-5-11 12:38
小播放器看上去小巧可爱，代码却不少。看来css-doodle画图可以变得简单之极，牵涉交互就复杂了。

交互都是复杂的