请教：同步歌词在编辑器里显示而论坛不显示。谢谢！

老谟深虑

武朝歌 发表于 2025-2-14 10:11
我编辑器里显示截图在5#

        你现在再试试看。

武朝歌

老谟深虑 发表于 2025-2-14 10:04
请问这个代码是在哪里找的？

就是去年保存在文件夹里的一段代码，今天没事翻出来。

武朝歌

老谟深虑 发表于 2025-2-14 10:12
你现在再试试看。

11#难难老师的代码我看不懂，没敢修改。

风清

欣赏武老师精彩制作，画面美，歌曲好听，为您点赞问好！

老钟

欣赏老师制作的代码音画，界面很美，歌曲很好听。老师说的问题我也无法解释。有时候编辑器里不正常，到论坛发表是正常的。

起个网名好难

武朝歌 发表于 2025-2-14 09:45
不好意思，水平有限没看懂。您有空了帮我重写一下吧，谢谢！

就那句有问题啊

1. <style>
   
2.     #papa {
   
3.       position: absolute;
   
4.       width: 1164px;
   
5.       height: 620px;
   
6.       background: #000000 url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a514.jpg)no-repeat center/cover;
   
7.       overflow: hidden;
   
8.       margin-top: 90px;
   
9.           left:50%; transform:translate(-50%);
   
10.       box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;
    
11.     }
    
12. 
    
13.     audio {
    
14.       position: absolute;
    
15.       top: 580px;
    
16.       z-index: 50;
    
17.       width: 98%;
    
18.       height: 40px;
    
19.       outline: none;
    
20.       filter: invert(180);
    
21.     }
    
22. 
    
23.     audio::-webkit-media-controls-enclosure {
    
24.       background: transparent;
    
25.       border-radius: 4px;
    
26.     }
    
27. 
    
28.     .media-controls-container,
    
29.     .media-controls-container * {
    
30.       background: rgb(129, 73, 200); //滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)  #7eb637 border-radius: 4px;}
    
31. 
    
32.       audio::-webkit-media-controls-current-time-display {
    
33.         order: 1; //设置弹性盒对象元素的顺序color: #ffffff;text-shadow: unset;}
    
34. 
    
35.         audio::-webkit-media-controls-time-remaining-display {
    
36.           order: 2;
    
37.           color: #000000;
    
38.           text-shadow: unset;
    
39.         }
    
40. 
    
41.         #lrc {
    
42.           left: 15%;
    
43.           top: 75%;
    
44.         }
    
45. 
    
46.         #lrcc {
    
47.           left: 85%;
    
48.           transform: translate(-102%);
    
49.           top: 85%;
    
50.         }
    
51. 
    
52.         #lrc,
    
53.         #lrcc {
    
54.           --state: paused;
    
55.           --motion: cover2;
    
56.           --tt: 2s;
    
57.           --bg: #880000;
    
58.           border: 0px solid black;
    
59.           position: absolute;
    
60.           z-index: 2;
    
61.           font: normal 2.5em 华文隶书;
    
62.           color: #000078;
    
63.           white-space: pre;
    
64.           -webkit-background-clip: text;
    
65.           filter: drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);
    
66.         }
    
67. 
    
68.         #lrcc::before,
    
69.         #lrc::before {
    
70.           position: absolute;
    
71.           content: attr(data-lrc);
    
72.           width: 20%;
    
73.           height: 100%;
    
74.           color: transparent;
    
75.           overflow: hidden;
    
76.           white-space: pre;
    
77.           background: var(--bg);
    
78.           -webkit-background-clip: text;
    
79.           animation: var(--motion) var(--tt) linear forwards;
    
80.           animation-play-state: var(--state);
    
81.         }
    
82. 
    
83.         @keyframes cover1 {
    
84.           from {
    
85.             width: 0;
    
86.           }
    
87. 
    
88.           to {
    
89.             width: 100%;
    
90.           }
    
91.         }
    
92. 
    
93.         @keyframes cover2 {
    
94.           from {
    
95.             width: 0;
    
96.           }
    
97. 
    
98.           to {
    
99.             width: 100%;
    
100.           }
     
101.         }
     
102.   </style>
     
103.   <div id="papa">
     
104.     <div id="testImg">
     
105.       <div class='photo'></div>
     
106.       <div class='photo'></div>
     
107.       <div class='photo'></div>
     
108.       <div class='photo'></div>
     
109.       <div class='photo'></div>
     
110.       <div class='photo'></div>
     
111.       <div class='photo'></div>
     
112.       <div class='photo'></div>
     
113.     </div>
     
114.     <audio id="aud" loop controls autoplay>
     
115.       <source src="
     
116. https://music.163.com/song/media/outer/url?id=460966325.mp3" />
     
117.     </audio>
     
118.     <div id="lrc" data-lrc=""></div>
     
119.     <div id="lrcc" data-lrc=""></div>
     
120.   </div><div style="height:960px;"></div>
     
121.   <span id="lrcStr" style="visibility: hidden;"> [00:00.00] 武朝歌欢迎您
     
122. [00:15.00] 《芦花》
     
123. [00:22.33]芦花白 芦花美
     
124. [00:28.23]花絮满天飞
     
125. [00:33.68]千思万缕意绵绵
     
126. [00:39.46]路上彩云追
     
127. [00:44.86]追过山 追过水
     
128. [00:50.77]花飞为了谁
     
129. [00:56.31]大雁成行人双对
     
130. [01:02.02]相思花为媒
     
131. [01:07.77]情和爱 花为媒
     
132. [01:13.72]千里万里梦相随
     
133. [01:19.42]莫忘故乡秋光好
     
134. [01:24.66]早戴红花报春回
     
135. [01:30.48]情和爱 花为媒
     
136. [01:36.16]千里万里梦相随
     
137. [01:41.88]莫忘故乡秋光好
     
138. [01:47.37]早戴红花报春回
     
139. [01:53.91]
     
140. [02:03.82]芦花白 芦花美
     
141. [02:10.00]花絮满天飞
     
142. [02:15.30]千思万缕意绵绵
     
143. [02:21.09]路上彩云追
     
144. [02:26.68]追过山 追过水
     
145. [02:32.58]花飞为了谁
     
146. [02:38.02]大雁成行人双对
     
147. [02:43.81]相思花为媒
     
148. [02:49.52]情和爱 花为媒
     
149. [02:55.23]千里万里梦相随
     
150. [03:00.76]莫忘故乡秋光好
     
151. [03:06.12]早戴红花报春回
     
152. [03:12.13]情和爱 花为媒
     
153. [03:18.05]千里万里梦相随
     
154. [03:23.76]莫忘故乡秋光好
     
155. [03:29.16]早戴红花报春回
     
156. [03:34.92]莫忘故乡秋光好
     
157. [03:40.46]早戴红花报春回
     
158. [04:00.04]</span>
     
159.   <script>
     
160.     (function() {
     
161.         /*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
     
162.         let mKey = 0,
     
163.           averAdd = 0.3;
     
164.         let lrcTime = (ar) => {
     
165.           let tmpAr = [];
     
166.           for (j = 0; j < ar.length - 1; j++) {
     
167.             if (j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j + 1][0] - ar[j][0]).toFixed(1));
     
168.           }
     
169.           let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;
     
170.           tmpAr.push(aver);
     
171.           tmpAr.forEach((item, key) => {
     
172.             ar[key][2] = item > aver ? aver : item;
     
173.           });
     
174.           return ar;
     
175.         };
     
176.         let getLrcAr = (text) => {
     
177.           let lrcAr = [];
     
178.           let arr = "";
     
179.           let calcRule = [60, 1, 0.001];
     
180.           for (x of text.split('\n')) {
     
181.             let ar = [];
     
182.             let re = /\d+[\.:]\d+([\.:]\d+)?/g;
     
183.             let geci = x.replace(re, '');
     
184.             if (geci) {
     
185.               geci = geci.replace(/[\[\]\'"\t,]s?/g, '');
     
186.               let time = x.match(re);
     
187.               if (time != null) {
     
188.                 for (y of time) {
     
189.                   let tmp = y.match(/\d+/g);
     
190.                   let sec = 0;
     
191.                   for (z in tmp) sec += tmp[z] * calcRule[z];
     
192.                   ar[0] = [parseFloat(sec.toFixed(2)), geci];
     
193.                   lrcAr.push(ar[0]);
     
194.                 }
     
195.               }
     
196.             }
     
197.           }
     
198.           lrcAr.sort((a, b) => a[0] - b[0]);
     
199.           return (lrcTime(lrcAr));
     
200.         };
     
201.         let showLrc = (time) => {
     
202.           lrca = lrcAr[mKey][1];
     
203.           lrcAr.length == mKey + 1 ? lrcb = "" : lrcb = lrcAr[mKey + 1][1]; //判断最后一句歌词
     
204.           let Y = String(mKey / 2).indexOf(".");
     
205.           if (Y == -1) {
     
206.             0 == mKey && (lrc.innerHTML = lrca);
     
207.             lrc.dataset.lrc = lrca;
     
208.             lrcc.innerHTML = lrcb;
     
209.             lrcc.dataset.lrc = "";
     
210.             lrc.style.setProperty('--motion', 'cover1');
     
211.             lrc.style.setProperty('--tt', time + 's');
     
212.             lrc.style.setProperty('--state', 'running');
     
213.             lrcc.style.setProperty('--motion', 'cover2');
     
214.           } else {
     
215.             lrc.innerHTML = lrcb;
     
216.             lrcc.dataset.lrc = lrca;
     
217.             lrc.dataset.lrc = "";
     
218.             lrcc.style.setProperty('--motion', 'cover1');
     
219.             lrcc.style.setProperty('--tt', time + 's');
     
220.             lrcc.style.setProperty('--state', 'running');
     
221.             lrc.style.setProperty('--motion', 'cover2');
     
222.           }
     
223.           mKey += 1;
     
224.         };
     
225.         let calcKey = () => {
     
226.           for (j = 0; j < lrcAr.length; j++) {
     
227.             if (aud.currentTime <= lrcAr[j][0]) {
     
228.               mKey = j - 1;
     
229.               break;
     
230.             }
     
231.           }
     
232.           if (mKey < 0) mKey = 0;
     
233.           if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
234.           let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
235.           showLrc(time);
     
236.         };
     
237.         let mState = () => aud.paused ? (lrc.style.setProperty("--state", "paused"), lrcc.style.setProperty("--state", "paused")) : (lrc.style.setProperty("--state", "running"), lrcc.style.setProperty("--state", "running"));
     
238.       /*监听播放进度*/
     
239.       aud.addEventListener('timeupdate', () => {
     
240.         for (j = 0; j < lrcAr.length; j++) {
     
241.           if (aud.currentTime >= lrcAr[j][0]) {
     
242.             cKey = j;
     
243.             if (mKey === j) showLrc(lrcAr[j][2]);
     
244.             else continue;
     
245.           }
     
246.         }
     
247.       }); aud.addEventListener('pause', () => mState()); /*监听暂停事件*/ aud.addEventListener('play', () => mState()); /*监听播放事件*/ aud.addEventListener('seeked', () => calcKey()); /*监听查询事件*/
     
248.       let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
     
249.     })();
     
250.     (function() {
     
251.       var image = document.getElementById("testImg");
     
252.       let mState = () => aud.paused ? image.classList.add('stop') : image.classList.remove('stop');
     
253.       aud.addEventListener('play', () => mState());
     
254.       aud.addEventListener('pause', () => mState());
     
255.     })();
     
256.   </script>
     
257.   <style type="text/css">
     
258.     .photo {
     
259.       width: 100%;
     
260.       height: 100%;
     
261.       box-shadow: 0px 0px 0px 2px #ffffff;
     
262.       position: absolute;
     
263.       z-index: -2;
     
264.       top: 0px;
     
265.       left: 0px;
     
266.       opacity: 0;
     
267.       animation: round 48s linear infinite;
     
268.     }
     
269. 
     
270.     @keyframes round {
     
271.       0% {
     
272.         opacity: 1;
     
273.         clip-path: ellipse(0% 0% at 50% 50%);
     
274.       }
     
275. 
     
276.       2% {
     
277.         opacity: 1;
     
278.         clip-path: ellipse(1% 1% at 50% 50%);
     
279.       }
     
280. 
     
281.       9% {
     
282.         opacity: 1;
     
283.         clip-path: ellipse(50% 50% at 50% 50%);
     
284.       }
     
285. 
     
286.       12% {
     
287.         clip-path: ellipse(100% 100% at 50% 50%);
     
288.         opacity: 1;
     
289.       }
     
290. 
     
291.       16% {
     
292.         clip-path: ellipse(100% 100% at 50% 50%);
     
293.         -webkit-transform: translate(0%, 0%)scale(1);
     
294.         opacity: 0;
     
295.       }
     
296.     }
     
297. 
     
298.     .photo:nth-child(1) {
     
299.       background: url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a382.jpg
     
300. )no-repeat center/cover;
     
301.       animation-delay: 42s;
     
302.     }
     
303. 
     
304.     .photo:nth-child(2) {
     
305.       background: url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a514.jpg                                                         
     
306. )no-repeat center/cover;
     
307.       animation-delay: 36s;
     
308.     }
     
309. 
     
310.     .photo:nth-child(3) {
     
311.       background:
     
312.         url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a0ee.jpg
     
313. )no-repeat center/cover;
     
314.       animation-delay: 30s;
     
315.     }
     
316. 
     
317.     .photo:nth-child(4) {
     
318.       background:
     
319.         url(https://pic.imgdb.cn/item/660bf48e9f345e8d03478d6e.jpg
     
320. )no-repeat center/cover;
     
321.       animation-delay: 24s;
     
322.     }
     
323. 
     
324.     .photo:nth-child(5) {
     
325.       background:
     
326.         url(https://pic.imgdb.cn/item/660bf48e9f345e8d03478ba1.jpg
     
327. )no-repeat center/cover;
     
328.       animation-delay: 18s;
     
329.     }
     
330. 
     
331.     .photo:nth-child(6) {
     
332.       background:
     
333.         url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a514.jpg
     
334. )no-repeat center/cover;
     
335.       animation-delay: 12s;
     
336.     }
     
337. 
     
338.     .photo:nth-child(7) {
     
339.       background:
     
340.         url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a382.jpg
     
341. )no-repeat center/cover;
     
342.       animation-delay: 6s;
     
343.     }
     
344. 
     
345.     .photo:nth-child(8) {
     
346.       background:
     
347.         url(hhttps://pic.imgdb.cn/item/660bf4919f345e8d0347a382.jpg
     
348. )no-repeat center/cover;
     
349.       animation-delay: 0s;
     
350.     }
     
351. 
     
352.     .stop .photo:nth-child(1),
     
353.     .stop .photo:nth-child(2),
     
354.     .stop .photo:nth-child(3),
     
355.     .stop .photo:nth-child(4),
     
356.     .stop .photo:nth-child(5),
     
357.     .stop .photo:nth-child(6),
     
358.     .stop .photo:nth-child(7),
     
359.     .stop .photo:nth-child(8) {
     
360.       animation-play-state: paused;
     
361.     }
     
362.   </style>

复制代码

起个网名好难

武朝歌 发表于 2025-2-14 09:45
不好意思，水平有限没看懂。您有空了帮我重写一下吧，谢谢！

回复了，等待审核中…………

起个网名好难

老谟深虑 发表于 2025-2-14 10:04
请问这个代码是在哪里找的？

亚伦的

老谟深虑

武朝歌 发表于 2025-2-14 10:34
11#难难老师的代码我看不懂，没敢修改。

         我也不懂，不用修改了，就当没有同步歌词。

老谟深虑

起个网名好难 发表于 2025-2-14 11:44
亚伦的

       是亚伦的，我想找到这个源代码。