花儿朵朵《套用亚伦老师最美风景线》

一师

1. <div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px;  box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:  rotate(0deg);background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030409205677912653.gif)0 0px/100% 100%, linear-gradient(0deg, #000080, #883300, #882222, #000000); text-align: center;">
   
2. <img class='photo'   style="background: url(https://img-baofun.zhhainiao.com/fs/8593960a5bb85b2a56d2d3e7c79525b7.jpg)0 0px/100% 100%;"/>
   
3. <img class='photo'  style="background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614344400103298.jpg)0 0px/100% 100%;" />
   
4. <img class='photo' style="background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614351725693123.jpg)0 0px/100% 100%;" />
   
5. <img class='photo'  style="background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614325950787947.jpg)0 0px/100% 100%;" />
   
6. <img class='photo' style="background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614340555739676.jpg)0 0px/100% 100%;"/>
   
7. <img class='photo'  style="background: url(https://img-baofun.zhhainiao.com/fs/1e44714e0018e73d7831a10b7ffdaa54.jpg)0 0px/100% 100%;"/>
   
8. <img class='photo'style="background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030614333835236148.jpg)0 0px/100% 100%;" />
   
9. <img class='photo' style="background: url(http://chuangshicdn.data.mvbox.cn/album/21/09/17/21091709044596152074.jpg)0 0px/100% 100%;" />
   
10. <div class="container">
    
11. <audio autoplay="" class="audio" id="MusicPlayer" src="http://url.amp3a.com/kuwo.php/222030719.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
    
12.       <div class="btn">
    
13.          <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-45px;left:35px;width:150px;height:150px;z-index: 600;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px  0);"/>
    
14.         </div>
    
15. <div class="img_border" id="aplay"></div>
    
16.      <div class="items " style="width: 980px; height: 120px;z-index: 500;position: absolute;top:0px; left:0px;">
    
17. <div  class="lrc">
    
18.         <ul id="ullrc">
    
19.          </ul>
    
20. </div></div></div>
    
21. </div>
    
22. <style type="text/css">
    
23. .photo {width: 1000px;
    
24.   height: 600px;
    
25.   position: absolute;top:0px; left:0px;
    
26. filter:contrast(150%)brightness(100%);
    
27.   animation: round 48s infinite;
    
28.   opacity: 0;}
    
29. @keyframes round {0% {
    
30. opacity: 0;clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);
    
31. -webkit-transform:translate(0%,0%)scale(1);}
    
32. 1% {
    
33. opacity: 1;
    
34. clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);}
    
35. 8% {
    
36. opacity: 1;background-position: 0% -100%;clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
    
37. }
    
38. 15% {
    
39. opacity: 1;background-position: 0% -100%;clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
    
40. }
    
41. 20% {
    
42. opacity: 0;background-position: 0% -100%;clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
    
43. -webkit-transform:translate(0%,0%)scale(1);}
    
44. 
    
45. }
    
46. img:nth-child(8) {animation-delay: 42s;}
    
47. img:nth-child(7) {animation-delay: 36s;}
    
48. img:nth-child(6) {animation-delay: 30s;}
    
49. img:nth-child(5) {animation-delay: 24s;}
    
50. img:nth-child(4) {animation-delay: 18s;}
    
51. img:nth-child(3) {animation-delay: 12s;}
    
52. img:nth-child(2) {animation-delay: 6s;}
    
53. </style >
    
54. 
    
55. <style type="text/css">
    
56. .container{width: 0px;height: 0px;
    
57.     margin: 0;position: absolute;top:500px; left:0px;z-index: 0;}
    
58. .container #MusicPlayer{
    
59.     width: 250px;
    
60.     display: block;
    
61.     margin: 0 auto;}
    
62. .container .btn{
    
63.     display: block;z-index: 300;
    
64.     margin: 0;}
    
65. .container .lrc{
    
66.     width: 960px;
    
67.     height: 120px;z-index: 1;
    
68.     overflow: hidden;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);
    
69.     display: block;position: absolute;top:-10px; left:50px;
    
70.     margin: 0 auto;}
    
71. .container .lrc #ullrc{
    
72.     width: 100%;
    
73.     padding: 0;
    
74.     list-style: none;
    
75.     transition: 0.3s all ease;
    
76.     margin: 0;}
    
77. /*歌词普通样式*/
    
78. .container .lrc #ullrc li{
    
79.     height: 70px;
    
80.     line-height: 70px;
    
81. font-family:悟空大字库;
    
82.     font-size: 0px;
    
83.     color: #000078;
    
84.     font-weight: normal;
    
85.     transition: .3s all ease;/*一定要加上不然看着突兀*/
    
86.     list-style-type: none;
    
87.     text-align: center;
    
88.     display: block;
    
89.     width: 100%;
    
90.     margin: 0 auto;}
    
91. /*动态歌词样式*/
    
92. .container .lrc #ullrc li.active{
    
93.     font-size: 40px;
    
94.     color: #ff0000;
    
95.     font-weight: bold}
    
96. /*光碟动画*/
    
97. .container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:00px;}
    
98. .container .img_border #aplay{display:block; }
    
99. .container .z360z{width: 1000px; height: 600px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062215012080684104.gif)0px 0/100%  100%;
    
100.     z-index: 13;position: absolute;
     
101.    top:-500px;
     
102.     left: 0px;
     
103. animation: rotating 6s linear infinite;}
     
104. @keyframes rotating {0%{opacity: .3;filter:hue-rotate(0deg)contrast(160%)brightness(120%);}100%{opacity: .3;filter:hue-rotate(360deg)contrast(150%)brightness(100%);}}
     
105. </style>
     
106. <style type="text/css">.items  { z-index: 1540;animation: slider 0.26s linear infinite ;}
     
107. @keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
     
108. 50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
     
109. </style>
     
110. <script >var lrc = `[00:00]我是夜里的孤独 - 大美
     
111. [00:02]词：音决
     
112. [00:02]曲：音决
     
113. [00:05]出品：亚伦影音
     
114. [00:24]我的心里有多苦
     
115. [00:26]只有自己最清楚
     
116. [00:29]深夜里是多么的无助
     
117. [00:34]想哭却又哭不出
     
118. [00:36]既然选择这条路
     
119. [00:39]那又何必抱怨无人诉
     
120. [00:45]这一生最对不住
     
121. [00:47]那就是我的父母
     
122. [00:50]这么久还没个好归宿
     
123. [00:55]路途前行很盲目
     
124. [00:58]不知还有多少路
     
125. [01:00]才能看见明天的幸福
     
126. [01:06]其实心里很清楚
     
127. [01:09]悲伤终无人救赎
     
128. [01:11]夜里留下一人谁在乎
     
129. [01:17]眼泪总控制不住
     
130. [01:19]双眼泪水已模糊
     
131. [01:22]只能偷偷地在心里哭
     
132. [01:27]我是夜里的孤独
     
133. [01:30]也是白天的无助
     
134. [01:33]流着泪可却又哭不出
     
135. [01:38]脑子里一遍荒芜
     
136. [01:41]二两酒精来麻木
     
137. [01:43]哪怕是笑一声也知足
     
138. [02:10]如果心酸藏不住
     
139. [02:13]那就假装很幸福
     
140. [02:15]反正也没有人会在乎
     
141. [02:20]何必到处去诉苦
     
142. [02:23]说自己的心痛处
     
143. [02:26]不如安静迈出这一步
     
144. [02:31]其实心里很清楚
     
145. [02:34]悲伤终无人救赎
     
146. [02:36]夜里留下一人谁在乎
     
147. [02:42]眼泪总控制不住
     
148. [02:44]双眼泪水已模糊
     
149. [02:47]只能偷偷地在心里哭
     
150. [02:53]我是夜里的孤独
     
151. [02:55]也是白天的无助
     
152. [02:58]流着泪可却又哭不出
     
153. [03:03]脑子里一遍荒芜
     
154. [03:06]二两酒精来麻木
     
155. [03:08]哪怕是笑一声也知足`;
     
156. function $(id) {return document.getElementById(id);
     
157. }//这样写以后getid方便
     
158. function getLrcArray() {
     
159.     var parts = lrc.split("\n");
     
160.     for (let index = 0; index < parts.length; index++) {
     
161.         parts[index] = getLrcObj(parts[index]);
     
162.     }
     
163.     return parts;
     
164. 
     
165.     function getLrcObj(content) {
     
166.         var twoParts = content.split("]");
     
167.         var time = twoParts[0].substr(1);
     
168.         var timeParts = time.split(":");
     
169.         var seconds = +timeParts[1];
     
170.         var min = +timeParts[0];
     
171.         seconds = min * 60 + seconds;
     
172.         var words = twoParts[1];
     
173.         return{
     
174.             seconds: seconds,
     
175.             words: words,
     
176.         };
     
177.     }
     
178. }
     
179. var lrcArray = getLrcArray();
     
180. function inputLrc() {
     
181.     for (let index = 0; index < lrcArray.length; index++) {
     
182.         var li = document.createElement("li");
     
183.         li.innerText = lrcArray[index].words;
     
184.         $("ullrc").appendChild(li);
     
185.     }
     
186. }
     
187. inputLrc();
     
188. function setPosition() {
     
189.     var index = getLrcIndex();
     
190.     if (index == -1) {
     
191.         return;
     
192.     }
     
193.     var lrc_li_height = 70, lrc_ul_height = 50;
     
194.     var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
     
195.     if (top < 0) {
     
196.         top = 0;
     
197.     }
     
198.     $("ullrc").style.marginTop = -top + "px";
     
199.     var activeLi = $("ullrc").querySelector(".active");
     
200.     if(activeLi){
     
201.         activeLi.classList.remove("active");
     
202.     }
     
203.     $("ullrc").children[index].classList.add("active");
     
204. }
     
205. var turn = 0;
     
206. function getLrcIndex(){
     
207.     var time = $("MusicPlayer").currentTime + turn;
     
208.     for (var index = 0; index < lrcArray.length; index++) {
     
209.         if (lrcArray[index].seconds > time) {
     
210.             return index - 1;
     
211.         }
     
212.     }
     
213. }
     
214. $("MusicPlayer").ontimeupdate = setPosition;
     
215. </script>
     
216. <script>
     
217.          var aud = document.getElementById("MusicPlayer");
     
218. var img = document.getElementById("playpause");
     
219. img.onclick = function() {
     
220.         if (aud.paused) {
     
221.                 aud.play();
     
222.         } else {
     
223.                 aud.pause();
     
224.         }
     
225. }
     
226. aud.addEventListener("play", function (e) {
     
227. img.src="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
     
228. }, false);
     
229. aud.addEventListener("pause", function (e) {
     
230. img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
     
231. }, false);
     
232. </script>
     
233. <script type="text/javascript">
     
234. var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="items";};my_audio.onplaying = function()
     
235. {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
     
236. </script>

复制代码

湛蓝 发表于 2022-4-19 06:48
代码是复杂，但只需要把制作好的同步歌词替换原来的同步歌词，无需动其它代码

同步歌词我没信心，我的电脑太陈旧了，我的电脑操作也很差，只会在手机上做剪映的同步歌词，我电脑上只有酷我音乐，而且还不使用过。

湛蓝

一师 发表于 2022-4-19 06:55
同步歌词我没信心，我的电脑太陈旧了，我的电脑操作也很差，只会在手机上做剪映的同步歌词，我电脑上只有 ...

手机制作的同步歌词一般是MP4格式，不能用于代码音画！

代码音画的同步歌词是先制作好，再粘贴到代码里，也就是替换原来的同步歌词！

我说的那个一两秒提取同步歌词的小软件，非常小，与电脑配置无关.

湛蓝

关于酷我音乐同步歌词的制作，夕阳老师《酒醉的蝴蝶》一帖，静悟版主提供了制作同步歌词网址.

一师

[i=s] 本帖最后由 一师 于 2022-9-5 10:32 编辑 [/i]