竖排歌词不滚动，请马老师让它动起来，谢谢[已解决]

马黑黑

杨帆 发表于 2025-4-8 21:39
由衷感谢，谢谢马老师鼓励！

我多次点刷新按钮，可只有前5句，看不到第6句及以后的歌词呀

原因是音乐此刻缓冲太慢

杨帆

马黑黑 发表于 2025-4-8 22:42
原因是音乐此刻缓冲太慢

点击进度条歌词不滚动，应是代码问题，请老师抽空对代码修正、完善，由衷感谢

夕阳黄昏

杨帆 发表于 2025-4-8 17:30 是，适当套用就好，可全套会失去探索过程的乐趣

00:00

00:00

夕阳黄昏

杨帆 发表于 2025-4-8 17:30
是，适当套用就好，可全套会失去探索过程的乐趣

1. <style>
   
2.   #papa {
   
3.     position: absolute;
   
4.     left: 50%;
   
5.     transform: translateX(-50%);
   
6.     width: clamp(800px, 75vw, 1280px);
   
7.     height: clamp(450px, 75vh, 750px);
   
8.     background: #eee url('https://pic.imgdb.cn/item/668a84acd9c307b7e9437ddf.jpg') no-repeat center/cover;
   
9.     z-index: 1;
   
10.   }
    
11. 
    
12.   .zw {
    
13.     height: clamp(450px, 75vh, 750px);
    
14.     margin: 30px;
    
15.     --state: paused;
    
16.     z-index: 1;
    
17.   }
    
18. 
    
19.   #lrcDiv {
    
20.     writing-mode: vertical-rl;
    
21.     --hlcolor: #FF44AA;
    
22.     position: absolute;
    
23.     top: 1%;
    
24.     right: 10%;
    
25.     display: flex;
    
26.     flex-direction: column;
    
27.     gap: 6px;
    
28.     width: 145px;
    
29.     height: 650px;
    
30.     overflow: hidden;
    
31.     font: normal 18px/24px 'Microsoft YaHei', sans-serif;
    
32.     text-align: center;
    
33.     color: #FFBB66;
    
34.     background: none;
    
35.     z-index: 5;
    
36.   }
    
37. 
    
38.   #lrcDiv>p {
    
39.     margin: 0;
    
40.     padding: 0;
    
41.     transition: .95s;
    
42.   }
    
43. 
    
44.   #lrcDiv>p.hlight {
    
45.     color: var(--hlcolor);
    
46.     font-size: 28px;
    
47.     font-weight: bold;
    
48.   }
    
49. 
    
50.   #mplayer {
    
51.     z-index: 5;
    
52.     --track: silver;
    
53.     --prog: red;
    
54.     --percent: 0;
    
55.     display: flex;
    
56.     left: 300px;
    
57.     top: 580px;
    
58.     gap: 15px;
    
59.     flex-direction: column;
    
60.     align-items: center;
    
61.     width: 650px;
    
62.     background: none;
    
63.     color: white;
    
64.     padding: 15px;
    
65.     position: absolute;
    
66.   }
    
67. 
    
68.   #btns-area {
    
69.     width: 100%;
    
70.     display: flex;
    
71.     justify-content: space-between;
    
72.     margin-top: 15px;
    
73.   }
    
74. 
    
75.   #btn-play {
    
76.     width: 20px;
    
77.     height: 20px;
    
78.     cursor: pointer;
    
79.     position: relative;
    
80.   }
    
81. 
    
82.   #btn-play:hover::after {
    
83.     opacity: .7;
    
84.     filter: alpha(opacity:.5);
    
85.   }
    
86. 
    
87.   #btn-play::after {
    
88.     position: absolute;
    
89.     content: '';
    
90.     width: 100%;
    
91.     height: 100%;
    
92.     background: var(--prog);
    
93.     clip-path: var(--clip);
    
94.   }
    
95. 
    
96.   #progDiv {
    
97.     z-index: 5;
    
98.     width: 100%;
    
99.     height: 10px;
    
100.     background: linear-gradient(to right, var(--prog) var(--percent), var(--track) var(--percent), var(--track) 0) no-repeat 0 50% / 100% 2px;
     
101.     cursor: pointer;
     
102.   }
     
103. 
     
104.   .play {
     
105.     --clip: polygon(10% 0, 100% 50%, 10% 100%);
     
106.   }
     
107. 
     
108.   .pause {
     
109.     --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
     
110.   }
     
111. 
     
112.   .vid {
     
113.     position: absolute;
     
114.     width: 100%;
     
115.     height: 100%;
     
116.     opacity: .8;
     
117.     object-fit: cover;
     
118.     mask: radial-gradient(transparent 20%, red);
     
119.     -webkit-mask: radial-gradient(transparent 20%, red);
     
120.     pointer-events: none;
     
121.     left: 0px;
     
122.     top: 0px;
     
123.   }
     
124. </style>
     
125. <div id="papa">
     
126.   <div id="lrcDiv"></div>
     
127.   <div id="mplayer">
     
128.     <div id="btns-area">
     
129.       <div id="time1">00:00</div>
     
130.       <div id="btn-play" class="pause"></div>
     
131.       <div id="time2">00:00</div>
     
132.     </div>
     
133.     <div id="progDiv"></div>
     
134.   </div>
     
135.   <video class="vid " src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" loop muted autoplay=""></video>
     
136.   <audio src="https://cccimg.com/view.php/d05d8a08510c3c47ab212b4fa6668f52.mp3" autoplay loop></audio>
     
137. </div>
     
138. <div class="zw"></div>
     
139. 
     
140. <script>
     
141. const mplayer = document.querySelector('#mplayer');
     
142.         const aud = document.querySelector('audio');
     
143.         const lrcDiv = document.querySelector('#lrcDiv');
     
144.         const progDiv = document.querySelector('#progDiv');
     
145.         const btnPlay = document.querySelector('#btn-play');
     
146.         const vids = document.querySelectorAll('video');
     
147.        
     
148.        let lrcAr = [], isFScreen = false;
     
149.            let lineHeight = 40, showLines = 5;                // 滚动需要的关键参数
     
150.                 lrcDiv.style.width = lineHeight * showLines + 'px';         //        根据行数计算容器的宽度
     
151.                
     
152.         const getLrcAr = (text) => {
     
153.         const ar = text.trim().split(/[\r\n]+/g);
     
154.                 var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
     
155.                 ar.forEach(item => {                       
     
156.                                 let result = item.match(reg);
     
157.                                 let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
     
158.                                 lrcAr.push([tmsg, result[4].trim()]);
     
159.                                 let p = document.createElement('p');
     
160.                                 p.textContent = result[4].trim();
     
161.                                 lrcDiv.appendChild(p);
     
162.                
     
163.                 });
     
164.                 lrcAr.sort((a, b) => a[0] - b[0]);
     
165.         };
     
166. 
     
167.         const updatePlayerDatas = () => {
     
168.                 const percent = (aud.currentTime / aud.duration) * 100;
     
169.                 time1.innerText = formatTime(aud.currentTime);
     
170.                 time2.innerText = formatTime(aud.duration);
     
171.                 mplayer.style.setProperty('--percent', percent + '%');
     
172.                 for (let i = 0; i < lrcAr.length; i ++) {
     
173.                         const lrc = {time: lrcAr[ i ][0], text: lrcAr[ i ][1]};
     
174.                         const next = i < lrcAr.length - 1 ? lrcAr[i + 1][0] : null;
     
175.                         const p = lrcDiv.children[ i ];
     
176.                         if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
     
177.                                 p.classList.add('hlight');
     
178.                                 //lrcDiv.scroll({left: 0, top: p.offsetLeft - lrcDiv.offsetHeight / 2 + 12, behavior: 'smooth'});
     
179.                                 // 滚动的关键代码，与原来的比较下就知道为什么不动了。
     
180.                                 lrcDiv.scroll({left: p.offsetLeft - (Math.ceil(showLines / 2) * lineHeight) + lineHeight, top: 0, behavior: 'smooth'});          
     
181.                         } else {
     
182.                                 p.classList.remove('hlight');
     
183.                         }
     
184.                 }
     
185.         };
     
186. 
     
187. 
     
188.         const formatTime = (seconds) => {
     
189.                 const mins = Math.floor(seconds / 60);
     
190.                 const secs = Math.floor(seconds % 60);
     
191.                 return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
     
192.         };
     
193. 
     
194.         const mState = () => {
     
195.                 if (aud.paused) {
     
196.                         btnPlay.className = 'play';
     
197.                         btnPlay.title = '点击播放';
     
198.                         playvids(false);
     
199.                         papa.style.setProperty('--state', 'paused');
     
200.                 } else {
     
201.                         btnPlay.className = 'pause';
     
202.                         btnPlay.title = '点击暂停';
     
203.                         playvids(true);
     
204.                         papa.style.setProperty('--state', 'running');
     
205.                 }
     
206.         };
     
207. 
     
208.         const playvids = (flag) => {
     
209.                 if(!vids) return;
     
210.                 vids.forEach(vid => flag ? vid.play() : vid.pause());
     
211.         };
     
212. 
     
213.         progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
     
214.         progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));
     
215. 
     
216. const lrc = `
     
217. [00:00.00]时光匆匆如流水（Live 合唱版)-付飞社
     
218. [00:03.83]词：未子夫
     
219. [00:07.66]曲：李勇军
     
220. [00:11.49]编曲：姜凯升
     
221. [00:15.32]后期：鲁晓锋
     
222. [00:19.15]和声：凌菲
     
223. [00:22.98]制作人：李勇军工作室
     
224. [00:26.81]OP：新创焦桐文化
     
225. [00:30.64]【曲库专用】
     
226. [00:34.47]来到人世间受苦又受累
     
227. [00:42.00]尝尽了人生百般滋味
     
228. [00:49.53]一路坎坷雨打又风吹
     
229. [00:57.03]回首这半生我太过狼狈
     
230. [01:04.50]春去秋来 花开花枯萎
     
231. [01:11.97]转眼我青丝 已经成了灰
     
232. [01:19.47]想找个地方 好好醉一回
     
233. [01:27.06]又害怕醉了没人可依偎
     
234. [01:34.50]时光匆匆 岁月如流水
     
235. [01:42.00]往事随风 一去不再回
     
236. [01:49.56]不知不觉容颜已憔悴
     
237. [01:57.06]我这辈子遭了太多罪
     
238. [02:04.47]时光匆匆 岁月如流水
     
239. [02:12.03]人到了中年 没路可以退
     
240. [02:19.53]看遍了人间是是与非非
     
241. [02:27.06]我若心碎 谁给我安慰
     
242. [02:32.43]谁给我安慰
     
243. [03:12.00]春去秋来 花开花枯萎
     
244. [03:19.47]转眼我青丝 已经成了灰
     
245. [03:26.97]想找个地方 好好醉一回
     
246. [03:34.53]又害怕醉了没人可依偎
     
247. [03:41.94]时光匆匆 岁月如流水
     
248. [03:49.47]往事随风 一去不再回
     
249. [03:57.03]不知不觉容颜已憔悴
     
250. [04:03.69]我这辈子遭了太多罪
     
251. [04:11.91]时光匆匆 岁月如流水
     
252. [04:19.50]人到了中年 没路可以退
     
253. [04:27.00]看遍了人间是是与非非
     
254. [04:34.53]我若心碎 谁给我安慰
     
255. [04:40.08]谁给我安慰
     
256. 
     
257. `;
     
258. 
     
259. getLrcAr(lrc);
     
260. 
     
261. aud.addEventListener('timeupdate', updatePlayerDatas);
     
262.         aud.addEventListener('playing', mState);
     
263.         aud.addEventListener('pause', mState);
     
264.         btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
     
265. 
     
266. </script>

复制代码

杨帆

夕阳黄昏 发表于 2025-4-9 11:19

终于实现预期，由衷感谢老师帮助解决了困扰好久的问题，夕阳老师您辛苦了