人生如书 （歌词同步）

武朝歌

梦景 发表于 2025-4-16 16:01
问候老师好！精美音画佳作，创意别具一格，为您点赞！向您学习！

谢谢您的鼓励和支持！

老谟深虑

1. <style>
   
2.   #papa {
   
3.     margin: 80px auto 32px calc(50% - 473px);
   
4.     width: 1024px;
   
5.     height: 640px;
   
6.     background: url('https://img11.iqilu.com/179/2022/07/11/5829060321b6c7b641d1e65294b804db.jpg ') no-repeat
   
7. 
   
8. center/cover;
   
9.     box-shadow: 3px 3px 20px #000;
   
10.     overflow: hidden;
    
11.     position: relative;
    
12.     z-index: 1;
    
13.   }
    
14. 
    
15.   #mypic {
    
16.     position: absolute;
    
17.     width: 100px;
    
18.     overflow: hidden;
    
19.     border-radius: 50%;
    
20.     margin-top: 520px;
    
21.     margin-left: 30px;
    
22.     cursor: pointer;
    
23.     z-index: 99;
    
24.     animation: rot 6s infinite linear var(--state);
    
25.   }
    
26. 
    
27.   @keyframes rot {
    
28.     to {
    
29.       transform: rotate(360deg);
    
30.     }
    
31.   }
    
32. 
    
33.   .lrc {
    
34.     width: 100%;
    
35.     height: 120px;
    
36.     overflow: hidden;
    
37.     filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow (#ffffff -1px 0
    
38. 
    
39. 0) drop-shadow(#ffffff 0 -1px 0);
    
40.     display: block;
    
41.     position: absolute;
    
42.     top: 10%;
    
43.     left: -18%;
    
44.     z-index: 5;
    
45.     margin: 0 auto;
    
46.   }
    
47. 
    
48.   .lrc #ullrc {
    
49.     width: 100%;
    
50.     padding: 0;
    
51.     list-style: none;
    
52.     transition: 0.3s all ease;
    
53.     margin: 0;
    
54.   }
    
55. 
    
56.   /*歌词普通样式*/
    
57.   .lrc #ullrc li {
    
58.     height: 70px;
    
59.     line-height: 60px;
    
60.     font-family: 华文隶书;
    
61.     font-size: 0px;
    
62.     color: #000078;
    
63.     font-weight: normal;
    
64.     transition: .3s all ease;
    
65.     /*一定要加上不然看着突兀*/
    
66.     list-style-type: none;
    
67.     text-align: center;
    
68.     display: block;
    
69.     width: 100%;
    
70.     margin: 0 auto;
    
71.   }
    
72. 
    
73.   /*动态歌词样式*/
    
74.   .lrc #ullrc li.active {
    
75.     font-size: 40px;
    
76.     color: #CCFF00;
    
77.     text-align: center;
    
78.   }
    
79. </style>
    
80. <div id="papa">
    
81.   <img id="mypic" src="https://pic.imgdb.cn/item/67220d84d29ded1a8c493f87.png" alt="" />
    
82.   <audio id="aud" src="http://music.163.com/song/media/outer/url?id=1933614678.mp3" autoplay loop></audio>
    
83.   <div class="lrc">
    
84.     <ul id="ullrc"></ul>
    
85.   </div>
    
86. </div>
    
87. <style type="text/css"></style>
    
88. 
    
89. <script >var lrc =`[00:01.000] 武朝歌欢迎您\n[00:15.430]《人生如书》\n[00:18.540]人生如书，\n[00:19.530]翻开是故事，\n[00:21.390]合上是回忆。\n[00:25.380]愿我们的故事精彩，\n[00:29.220]愿我们的回忆美丽。\n[00:33.120]忙碌中保重身体，\n[00:37.080]快乐中享受生活。\n[00:41.070]山海自有归期，\n[00:44.820]风雨自有相逢，\n[00:48.960]意难平终和解，\n[00:52.890]万事终将如意。\n[01:12.540]人生如书，\n[01:14.610]翻开是故事，\n[01:16.500]合上是回忆。\n[01:20.460]愿我们的故事精彩，\n[01:24.300]愿我们的回忆美丽。\n[01:28.260]忙碌中保重身体，\n[01:32.160]快乐中享受生活。\n[01:36.150]山海自有归期，\n[01:39.750]风雨自有相逢，\n[01:44.040]意难平终和解，\n[01:48.000]万事终将如意。\n[01:51.870]山海自有归期，\n[01:55.770]风雨自有相逢，\n[01:59.760]意难平终和解，\n[02:03.720]万事终将如意。\n[02:09.720]
    
90. `;
    
91. 
    
92.   function getLrcArray() {
    
93.     var parts = lrc.split("\n");
    
94.     for (let index = 0; index < parts.length; index++) {
    
95.       parts[index] = getLrcObj(parts[index]);
    
96.     }
    
97.     return parts;
    
98. 
    
99.     function getLrcObj(content) {
    
100.       var twoParts = content.split("]");
     
101.       var time = twoParts[0].substr(1);
     
102.       var timeParts = time.split(":");
     
103.       var seconds = +timeParts[1];
     
104.       var min = +timeParts[0];
     
105.       seconds = min * 60 + seconds;
     
106.       var words = twoParts[1];
     
107.       return {
     
108.         seconds: seconds,
     
109.         words: words,
     
110.       };
     
111.     }
     
112.   }
     
113.   var lrcArray = getLrcArray();
     
114. 
     
115.   function inputLrc() {
     
116.     for (let index = 0; index < lrcArray.length; index++) {
     
117.       var li = document.createElement("li");
     
118.       li.innerText = lrcArray[index].words;
     
119.       ullrc.appendChild(li);
     
120.     }
     
121.   }
     
122.   inputLrc();
     
123. 
     
124.   function setPosition() {
     
125.     var index = getLrcIndex();
     
126.     if (index == -1) {
     
127.       return;
     
128.     }
     
129.     var lrc_li_height = 70,
     
130.       lrc_ul_height = 60;
     
131.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
132.     if (top < 0) {
     
133.       top = 0;
     
134.     }
     
135.     ullrc.style.marginTop = -top + "px";
     
136.     var activeLi = ullrc.querySelector(".active");
     
137.     if (activeLi) {
     
138.       activeLi.classList.remove("active");
     
139.     }
     
140.     ullrc.children[index].classList.add("active");
     
141.   }
     
142.   var turn = 0;
     
143. 
     
144.   function getLrcIndex() {
     
145.     var time = aud.currentTime + turn;
     
146.     for (var index = 0; index < lrcArray.length; index++) {
     
147.       if (lrcArray[index].seconds > time) {
     
148.         return index - 1;
     
149.       }
     
150.     }
     
151.   }
     
152.   aud.ontimeupdate = setPosition;
     
153.   let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
154.   aud.addEventListener('pause', () => mState());
     
155.   aud.addEventListener('playing', () => mState());
     
156.   mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
     
157. </script>

复制代码

微尘

武朝歌 发表于 2025-4-16 16:56
谢谢您的鼓励和支持！

老友，下午好。

筱亭

欣赏老师的精美制作，简约大气，

武朝歌

筱亭 发表于 2025-4-17 03:20
欣赏老师的精美制作，简约大气，

谢谢您的鼓励和支持。上午好！

武朝歌

老谟深虑 发表于 2025-4-16 17:37

收藏了。谢谢！

老谟深虑

武朝歌 发表于 2025-4-17 09:34
收藏了。谢谢！

        我把最后一句时间轴加上了。

武朝歌

老谟深虑 发表于 2025-4-17 12:20
我把最后一句时间轴加上了。

知道了。谢谢!

筱亭

武朝歌 发表于 2025-4-17 09:33
谢谢您的鼓励和支持。上午好！

为老师点赞