请教老师们如何关联播放器转动

马黑黑

思路是对的，一些细节需要处理。代码加工如下：

1. <style>
   
2. #papa {
   
3.         margin: 80px 0 0 calc(50% - 681px);
   
4.         width: 1200px;
   
5.         height: 700px;
   
6.         background: tan;
   
7.         box-shadow: 0 0 10px gray;
   
8.         position: relative;
   
9.         --state: paused;
   
10. }
    
11. css-doodle { position: absolute; }
    
12. .vid { position: absolute; width: 1200px; height: 700px;  object-fit: cover; opacity: 1; }
    
13. </style>
    
14. <div id="papa">
    
15.         <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/15ffded0ce14cc4ed9cff128e93adcf7_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
    
16.         <css-doodle grid="5" id="mplayer">
    
17.                 :doodle {
    
18.                         @size: 1200px 700px;
    
19.                         z-index: 1;
    
20.                 }
    
21.                 @match(@i ≤ @size - 1) {
    
22.                         @size: @r(40,110)px;
    
23.                         position: absolute;
    
24.                         @shape: @p(fish, whale);
    
25.                         @place:50px 50px;
    
26.                         background: SlateBlue;
    
27.                         offset-path: path('M@r(200) @r(200,400), L@r(500,700) @r(300), L@r(1000,1160) @r(200,400), L@r(400,550) @r(300,460)Z');
    
28.                         :after {
    
29.                                 position:absolute;
    
30.                                 content: '';
    
31.                                 right: 10px;
    
32.                                 width: 10px;
    
33.                                 height: 10px;
    
34.                                 border-radius: 50%;
    
35.                                 background: radial-gradient(black,snow);
    
36.                         }
    
37.                         animation: swim @r(10,30)s @r(-10, 0)s infinite ease-in-out var(--state);
    
38.                 }
    
39.                 @nth(@size) {
    
40.                         @size: 120px;
    
41.                         @place: center 78%;
    
42.                         background: rgba(0,255,0,.75);
    
43.                         cursor: pointer;
    
44.                         clip-path: @shape(
    
45.                                 points: 300;
    
46.                                 scale: .7;
    
47.                                 r: cos.cos.cos.cos.cos(7t) ^ cos(7t);
    
48.                         );
    
49.                         animation: rot 5s infinite linear var(--state);
    
50.                 }
    
51.                 @keyframes swim { to { offset-distance: 100%; } }
    
52.                 @keyframes rot { to { transform: rotate(360deg); } }
    
53.         </css-doodle>
    
54. 
    
55.         <css-doodle id="lrc">
    
56.                 :doodle {
    
57.                         @size: auto 4em;
    
58.                         left: 10px;
    
59.                         bottom: 10px;
    
60.                         --geci: "css-doodle player"; --motion: cover2; --tt: 1s;
    
61.                 }
    
62.                 /* 单元格两个伪元素显示lrc歌词 */
    
63.                 display: grid;
    
64.                 place-items: center start;
    
65.                 :before, :after {
    
66.                         content: var(--geci);
    
67.                         color: gray; /* 歌词底色 */
    
68.                         font: bold 2em sans-serif;
    
69.                         text-shadow: 1px 1px 2px #000;
    
70.                         white-space: pre;
    
71.                  }
    
72.                 :after {
    
73.                         position: absolute;
    
74.                         width: 0;
    
75.                         color: darkgreen; /* 同步歌词颜色 */
    
76.                         overflow: hidden;
    
77.                         animation: var(--motion) var(--tt) linear forwards var(--state);
    
78.                 }
    
79.                 @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
80.                 @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
81.         </css-doodle>
    
82.         <audio id="aud" src="https://www.qqmc.com/mp3/music277192354.mp3" autoplay loop></audio>
    
83. </div>
    
84. 
    
85. 
    
86. <script>
    
87. (function() {
    
88.         let script = document.createElement('script');
    
89.         script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    
90.         document.head.appendChild(script);
    
91.         let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
    
92.         let lrcAr = [
    
93.                 [0,"黄静美 - 如果你一贫如洗",0.0],
    
94.                 [0.01,"作词：冯海毓",0.1],
    
95.                 [0.1,"作曲：小米",2.9],
    
96.                 [3.03,"编曲：江历",1.0],
    
97.                 [4.04,"吉他：陈宁",1.0],
    
98.                 [5.06,"和声编写、和声：谌宥",1.0],
    
99.                 [6.07,"人声编辑：迟色",1.0],
    
100.                 [7.08,"混音师：浓汤宝",1.0],
     
101.                 [8.09,"统筹：小法",1.9],
     
102.                 [10,"制作人：何文宇",1.0],
     
103.                 [11.01,"策划: 陈玉荣",1.0],
     
104.                 [12.02,"宣发：星云计划",1.0],
     
105.                 [13.04,"监制：熊磊、王腾飞",1.0],
     
106.                 [14.05,"发行人：韦琪",1.0],
     
107.                 [15.06,"发行公司：万象星云",1.0],
     
108.                 [16.07,"LRC编辑：醉美水芙蓉",1.0],
     
109.                 [17.08,"人生啊仔细想想",3.0],
     
110.                 [20.09,"没有太多 眷恋的东西",4.0],
     
111.                 [24.05,"唯有身边的你",3.0],
     
112.                 [27.01,"是我一生的惦记",5.0],
     
113.                 [32.05,"岁月啊没有捷径",3.0],
     
114.                 [35.02,"一半努力 一半是运气",3.1],
     
115.                 [38.08,"无论得到失去",3.0],
     
116.                 [41.05,"记得有我陪着你",4.0],
     
117.                 [45.09,"如果有一天 你一贫如洗",4.0],
     
118.                 [49.06,"就让我做你 最后的行李",3.9],
     
119.                 [53.01,"看免费的四季",1.1],
     
120.                 [54.09,"身旁有你我就很富裕",5.9],
     
121.                 [60.03,"愿得一人心 白首不相离",3.0],
     
122.                 [63.08,"狂风暴雨我也为你撑起",4.0],
     
123.                 [67.05,"伴着爱行万里 多远也没有倦意",37.0],
     
124.                 [104.01,"岁月啊没有捷径",2.1],
     
125.                 [106.09,"一半努力 一半是运气",4.0],
     
126.                 [110.05,"无论得到失去",3.0],
     
127.                 [113.01,"记得有我陪着你",4.0],
     
128.                 [117.06,"如果有一天 你一贫如洗",4.0],
     
129.                 [121.03,"就让我做你 最后的行李",3.0],
     
130.                 [124.07,"看免费的四季",2.0],
     
131.                 [126.06,"身旁有你我就很富裕",5.0],
     
132.                 [131.09,"愿得一人心 白首不相离",4.0],
     
133.                 [135.05,"狂风暴雨我也为你撑起",4.0],
     
134.                 [139.01,"伴着爱行万里 多远也没有倦意",7.0],
     
135.                 [146.03,"如果有一天 你一贫如洗",3.1],
     
136.                 [149.09,"就让我做你 最后的行李",3.9],
     
137.                 [153.04,"看免费的四季",2.0],
     
138.                 [155.03,"身旁有你我就很富裕",5.0],
     
139.                 [160.06,"愿得一人心 白首不相离",4.0],
     
140.                 [164.02,"狂风暴雨我也为你撑起",3.1],
     
141.                 [167.08,"伴着爱行万里 多远也没有倦意",7.9],
     
142.                 [175.03,"谢谢欣赏！",6]
     
143.         ];
     
144. 
     
145.         let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
     
146.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
147.         let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
     
148.         aud.addEventListener('play', mState, false);
     
149.         aud.addEventListener('pause', mState, false);
     
150. 
     
151.         aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
     
152.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
     
153. })();
     
154. </script>

复制代码

南无月

这个讨论帖好跟着学习中

马黑黑

南无月 发表于 2023-5-24 22:49
这个讨论帖好跟着学习中

没有加新注释

南无月

马黑黑 发表于 2023-5-24 22:50
没有加新注释

有标准答案对就很好了，我知足的

马黑黑

南无月 发表于 2023-5-24 22:54
有标准答案对就很好了，我知足的

本来想加简单注释的，想想之前的代码都有的，就没加了

马黑黑

醉美水芙蓉 发表于 2023-5-25 06:17
谢谢黑黑老师指导！

你试试调整后的代码，看看效果，在尝试理解为什么这么组织代码

红影

黑黑辛苦了，查找别人代码中的问题，也是非常不容易的事呢

红影

水芙蓉找到的视频挺漂亮，歌词同步怎么到背景外面了啊

梦缘

很不错，感谢分享！

马黑黑

醉美水芙蓉 发表于 2023-5-25 11:44
好的！我研究一下，错在哪里？

主要：

① css-doodle 没有做 position 定位。本帖使用两个 css-doodle 标签，它和其他的HTML标签一样，需要定位。我整理的代码在CSS里完成了这项工作，然后，第一个 css-doodle 与 #papa 同尺寸，有了 position: absolute 绝对定位，它就会和 papa 重叠在一起，第二个css-doodle 则需要在自己的标签内做定位（left/right 和 top/bottom配套）。

② 拼凑JS代码，需要将不要的去掉。你这帖不需要进度条和播放时间信息，你去掉了大部分，但有少量多余的没有去掉。这个需要功夫，最好需要懂得每一句的作用，下手起来才会得心应手。

③ CSS变量 --state 有个层级问题，你这帖子由 papa 包裹内容，则应将 --state 变量交给它，css-doodle 里的变量赋值要删掉。

红影

醉美水芙蓉 发表于 2023-5-25 11:43
我上次跟你说的播放器做不出来，就是这个原因！

嗯嗯，代码里加入的内容不同。

南无月

马黑黑 发表于 2023-5-24 23:02
本来想加简单注释的，想想之前的代码都有的，就没加了

我得等晚上细看，昨天后来用手机看得吃办

马黑黑

南无月 发表于 2023-5-25 17:49
我得等晚上细看，昨天后来用手机看得吃办

南无月

马黑黑 发表于 2023-5-25 17:51

我的错，吃力。

马黑黑

南无月 发表于 2023-5-25 17:58
我的错，吃力。