你别哭 你别哭

老谟深虑

亚伦影音工作室 发表于 2024-10-21 22:34
论坛里面老钟的图片可以移动！

          我制作的也可以移动，但就是没有同步歌词。

山里娃

图片不动，也没有歌词的显示。

庶民

歌曲很美。

咕咚来了

对这种情况不甚了解。

老谟深虑

        欣赏老师的精美音画，老师厉害，图动了，歌词也显示了，向老师学习！

闲云

欣赏老师精彩的音画佳作，点赞支持，中午好！

闲云

1. <div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:-210px;MARGIN-top:86px;">
   
2. <style>#papa{
   
3.         position: relative;
   
4.         width: 1164px;
   
5.         height: 640px;
   
6.         margin-left:20px;
   
7.         margin-top:10px;
   
8.         border: 0px solid rgba(36, 201, 219,.95);
   
9.         border-radius: 0px;
   
10.         background:#000 url(https://pic.imgdb.cn/item/66135afc68eb9357135ffd24.jpg)no-repeat center/cover;
    
11.         overflow: hidden;
    
12. }
    
13. .img-container {
    
14.   position:absolute;z-index: 1;
    
15.   height: 700px;
    
16.   width: 800px;
    
17.   perspective: 500px;left:250px;
    
18.   transform-style: preserve-3d;
    
19. }
    
20. .box {      
    
21. width: 620px;
    
22. height: 400px;
    
23.   border-radius: 0px;
    
24.   overflow: hidden;
    
25.   border: 3px solid #ccc;
    
26.   position: absolute;
    
27.   top: 40%;
    
28.   transition: 800ms ease-in-out;
    
29. }
    
30. 
    
31. .box img {
    
32.   width: 100%;
    
33.   height: 100%;
    
34. }
    
35. 
    
36. .box:first-of-type {
    
37.   z-index: 1;
    
38.   opacity: 0;
    
39.   left: 15%;
    
40.   transform: translate(-100%, -100%) rotateY(50deg);
    
41. }
    
42. 
    
43. .box:nth-of-type(2) {
    
44.   opacity: 1;
    
45.   left: 20%;
    
46.   transform: translate(-50%, -50%) rotateY(-10deg);
    
47.   z-index: 1;
    
48. }
    
49. 
    
50. .box:nth-of-type(3) {
    
51.   left: 25%;
    
52.   opacity: 0.90;
    
53.   color: #eee;
    
54.   z-index: 10;
    
55.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-40px);
    
56. }
    
57. .box:nth-of-type(4) {
    
58.   z-index: 8;
    
59.   opacity: 0.80;
    
60.   left:30%;
    
61.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-80px);
    
62. }
    
63. 
    
64. .box:nth-of-type(5) {
    
65.   z-index: 7;
    
66.   opacity: 0.70;
    
67.   left: 35%;
    
68.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-120px);
    
69. }
    
70. 
    
71. .box:nth-of-type(6) {
    
72.   z-index: 6;
    
73.   opacity: 0.6;
    
74.   left: 40%;
    
75.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-160px);
    
76. }
    
77. 
    
78. .box:nth-of-type(7) {
    
79.   z-index: 5;
    
80.   opacity: 0.5;
    
81.   left: 45%;
    
82.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px);
    
83. }
    
84. .box:nth-of-type(8) {
    
85.   z-index: 4;
    
86.   opacity: 0.4;
    
87.   left: 50%;
    
88.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-240px);
    
89. }
    
90. .box:nth-of-type(9) {
    
91.   z-index: 3;
    
92.   opacity: 0.3;
    
93.   left: 55%;
    
94.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-280px);
    
95. }
    
96. .box:nth-of-type(10) {
    
97.   z-index: 2;
    
98.   opacity: 0;
    
99.   left: 60%;
    
100.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-320px);
     
101. }
     
102. #mplayer {top:12%; left:5%;cursor: pointer;
     
103.         width:200px;text-align:center;animation:rot 10s linear infinite;
     
104.         position: absolute;filter:drop-shadow(#000 0px 0 1px);
     
105.         z-index: 40;
     
106.         }
     
107. @keyframes rot { to { transform: rotate(2turn);} }
     
108. </style>
     
109. <div id="papa">
     
110. <div class="img-container">
     
111.       <div class="box">
     
112.         <img src="https://pic.imgdb.cn/item/66fb8410f21886ccc0a62100.webp" alt="">
     
113.       </div>
     
114.       <div class="box">
     
115.          <img src="https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg" alt="">
     
116.       </div>
     
117.       <div class="box">
     
118.         <img src="https://pic.imgdb.cn/item/6673e409d9c307b7e9a64805.webp" alt="">
     
119.       </div>
     
120.       <div class="box">
     
121.          <img src="https://pic.imgdb.cn/item/666909c4d9c307b7e9e71bad.jpg" alt="">
     
122.       </div>
     
123.       <div class="box">
     
124.          <img src="https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg" alt="">
     
125.       </div>
     
126.       <div class="box">
     
127.         <img src="https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg" alt="">
     
128.       </div>
     
129. 
     
130. <div class="box">
     
131.          <img src="https://pic.imgdb.cn/item/66fb8420f21886ccc0a62fe3.webp" alt="">
     
132.       </div>
     
133. <div class="box">
     
134.          <img src="https://pic.imgdb.cn/item/66fb8419f21886ccc0a628e0.webp" alt="">
     
135.       </div>
     
136. <div class="box">
     
137.          <img src="https://pic.imgdb.cn/item/6673e4b9d9c307b7e9a78f68.webp" alt="">
     
138.       </div>
     
139. <div class="box">
     
140.          <img src="https://pic.imgdb.cn/item/6673e506d9c307b7e9a816af.webp" alt="">
     
141.       </div>
     
142. </div>   
     
143. <div id="mplayer" > <svg width="100" height="100" viewBox="-160 -160 320 320">
     
144.         <defs>
     
145.                 <filter id="shadow">
     
146.                         <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black"></feDropShadow>
     
147.                 </filter>
     
148.                 <g id="part" filter="url(#shadow)">
     
149.                         <line x1="0" y1="-100" x2="0" y2="100" stroke="#880" stroke-width="4"></line>
     
150.                         <ellipse cx="0" cy="-125" rx="20" ry="20" fill="#fff"></ellipse>
     
151.                         <ellipse cx="0" cy="125" rx="20" ry="20" fill="#fff"></ellipse>
     
152.                 </g>
     
153.         </defs>
     
154.         <use href="#part"></use>
     
155.         <use href="#part" transform="rotate(35)"></use>
     
156.         <use href="#part" transform="rotate(70)"></use>
     
157.         <use href="#part" transform="rotate(105)"></use>
     
158.         <use href="#part" transform="rotate(140)"></use>
     
159. </svg></div>
     
160. <div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
     
161. <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/b5/0f/de/6615a1eb78f58c680fc5ea73f913e316/audio.mp3" autoplay="" loop="loop"></audio>
     
162. </div>
     
163. 
     
164.   <style type="text/css">
     
165. #lrc {
     
166.         --state: paused;
     
167.         --motion: cover2;
     
168.         --tt: 2s;
     
169.         --bg:  #880000;
     
170.         position: absolute;z-index: 4;
     
171.         left: 50%;
     
172.         transform: translate(-50%);
     
173.         top: 84%;
     
174.         font:normal 3em 华文隶书;
     
175.         color: #000;
     
176.         white-space: pre;
     
177.         -webkit-background-clip: text;
     
178.         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);
     
179. }
     
180. #lrc::before {
     
181.         position: absolute;
     
182.         content: attr(data-lrc);
     
183.         width: 20%;
     
184.         height: 100%;
     
185.         color: transparent;
     
186.         overflow: hidden;
     
187.         white-space: pre;
     
188.         background: var(--bg);
     
189.        
     
190.         -webkit-background-clip: text;
     
191.         animation: var(--motion) var(--tt) linear forwards;
     
192.         animation-play-state: var(--state);
     
193. }
     
194. @keyframes cover1 { from { width: 0; } to { width: 100%;} }
     
195. @keyframes cover2  { from { width: 0;} to { width: 100%;} }
     
196. </style>
     
197. 
     
198.   <script>
     
199. let imgContainer = document.querySelector(".img-container");
     
200. setInterval(() => {
     
201.      if(!aud.paused){
     
202.         let last = imgContainer.firstElementChild;
     
203.         last.remove();
     
204.         imgContainer.appendChild(last);}
     
205.       }, 2500);
     
206. </script>
     
207. <script>
     
208. 
     
209. mplayer.onclick = () => aud.paused ? (aud.play()): (aud.pause());
     
210. aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
     
211. aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
     
212. 
     
213. </script>
     
214. <script >
     
215. (function() {
     
216. /*原始lrc歌词*/
     
217. let lrcStr = `[00:01.29]你别哭 你别哭
     
218. [00:04.95]我知道你走的很辛苦
     
219. [00:08.79]那种身心上的疲惫和无助
     
220. [00:12.78]是旁人感受不到的难处
     
221. [00:31.41]我知道 你坚强的背后
     
222. [00:35.10]一定藏着很多脆弱
     
223. [00:38.85]我知道 你懂事的背后
     
224. [00:42.63]一定藏着很多失落
     
225. [00:46.35]我知道 你笑容的背后
     
226. [00:50.10]一定藏着很多难过
     
227. [00:53.88]有时候会莫名眼泪滑落
     
228. [00:57.96]却不知该怎么诉说
     
229. [01:02.96]因为代码太长所以只好把歌词删掉一部分
     
230. `;
     
231. 
     
232. /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
     
233. let mKey = 0, mFlag = true, averAdd = 0.3;
     
234. 
     
235. /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
     
236. let lrcTime = (ar) => {
     
237.         let tmpAr = [];
     
238.         for(j = 0; j <ar.length - 1; j ++) {
     
239.                 if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
     
240.         }
     
241.         let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
     
242.         tmpAr.push(aver);
     
243.         tmpAr.forEach((item,key) => {
     
244.                 ar[key][2] = item > aver ? aver : item;
     
245.         });
     
246.         return ar;
     
247. };
     
248. 
     
249. /*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
     
250. let getLrcAr = (text) => {
     
251.         let lrcAr = [];
     
252.         let calcRule = [60,1,0.001];
     
253.         for(x of text.split('\n')) {
     
254.                 let ar = [];
     
255.                 let re = /\d+[\.:]\d+([\.:]\d+)?/g;
     
256.                 let geci = x.replace(re,'');
     
257.                 if(geci) {
     
258.                         geci = geci.replace(/[\[\]\'"\t,]s?/g,'');
     
259.                         let time = x.match(re);
     
260.                         if(time != null) {
     
261.                                 for(y of time) {
     
262.                                         let tmp = y.match(/\d+/g);
     
263.                                         let sec = 0;
     
264.                                         for(z in tmp) sec += tmp[z] * calcRule[z];
     
265.                                         ar[0] = [parseFloat(sec.toFixed(2)), geci];
     
266.                                         lrcAr.push(ar[0]);
     
267.                                 }
     
268.                         }
     
269.                 }
     
270.         }
     
271.         lrcAr.sort((a,b)=> a[0] - b[0]);
     
272.         return(lrcTime(lrcAr));
     
273. };
     
274. 
     
275. /*函数 ：模拟显示同步歌词*/
     
276. let showLrc = (time) => {
     
277.         let name = mFlag ? 'cover1' : 'cover2';
     
278.         lrc.innerHTML = lrcAr[mKey][1];
     
279.         lrc.dataset.lrc = lrcAr[mKey][1];
     
280.         lrc.style.setProperty('--motion', name);
     
281.         lrc.style.setProperty('--tt', time + 's');
     
282.         lrc.style.setProperty('--state', 'running');
     
283.         mKey += 1;
     
284.         mFlag = !mFlag;
     
285. };
     
286. 
     
287. /*函数 ：处理当前歌词索引 mKey*/
     
288. let calcKey = () => {
     
289.         for (j = 0; j < lrcAr.length; j++) {
     
290.                 if (aud.currentTime <= lrcAr[j][0]) {
     
291.                         mKey = j - 1;
     
292.                         break;
     
293.                 }
     
294.         }
     
295.         if (mKey < 0) mKey = 0;
     
296.         if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
297.         let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
298.         showLrc(time);
     
299. };
     
300. 
     
301. /*格式化时间信息*/
     
302. let toMin = (val) => {
     
303.         if (!val) return '00:00';
     
304.         val = Math.floor(val);
     
305.         let min = parseInt(val / 60),
     
306.         sec = parseFloat(val % 60);
     
307.         if (min < 10) min = '0' + min;
     
308.         if (sec < 10) sec = '0' + sec;
     
309.         return min + ':' + sec;
     
310. }
     
311. 
     
312. /*函数 ：关键帧动画状态切换*/
     
313. let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
     
314. 
     
315. /*监听播放进度*/
     
316. aud.addEventListener('timeupdate', () => {
     
317.         for (j = 0; j < lrcAr.length; j++) {
     
318.                 if (aud.currentTime >= lrcAr[j][0]) {
     
319.                         cKey = j;
     
320.                         if (mKey === j) showLrc(lrcAr[j][2]);
     
321.                         else continue;
     
322.                 }
     
323.         }
     
324. });
     
325. aud.addEventListener('pause', () => mState());/*监听暂停事件*/
     
326. aud.addEventListener('play', () => mState());/*监听播放事件*/
     
327. aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
     
328. let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
     
329. })();
     
330. 
     
331. </script>
     
332. 
     
333. </div>
     
334. 
     
335. <div style="width: 100%;height: 780px;"> </div>
     
336. 
     

复制代码

闲云

老谟深虑 发表于 2024-10-22 11:09
欣赏老师的精美音画，老师厉害，图动了，歌词也显示了，向老师学习！
...

一幅非常完美的音画佳作！

西湖

我用二个浏览器打不开，同步歌词不显示，图片也不动了。

筱亭

闲云 发表于 2024-10-22 11:16

这么长的代码呀