囚鸟（彭羚）TO：黑黑

小辣椒

囚鸟（彭羚）

TO：黑黑

                          动人的歌曲总有动人的故事
                          他们的深情
                          都在那歌曲背后的创作故事里
                          《囚鸟》表达了繁华都市中
                          某些人与人之间情感的冷漠
                          创作者发现在都市里
                          真情真切的爱越来越少
                          孤独冷清的日子越来越多
                          特别失恋的人像是一只囚鸟
                          渴望爱人能够给自己一点的爱
                          看似简单的事情却如此遥不可及
                          只有眼泪与自己作伴肆意流淌
                         
                          
                

囚鸟（彭羚）TO：黑黑

小辣椒 2022 02 27

小辣椒

1. <style type="text/css">
   
2. 
   
3. .mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #4a3122; border-radius: 10px; background: #988d85; }
   
4. .ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
   
5. .ctBox p,img, h2,button { text-align:center; }
   
6. #lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }
   
7. #lrcDiv ul, lrcli { margin: 0; padding: 0;  }
   
8. #lrcUl { position: absolute; left:30px;top: 0; }
   
9. #lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }
   
10. #myplayer { outline: none; list-style-type: none; }
    
11. 
    
12. </style>
    
13. 
    
14. <div class="mnBox">
    
15.         <div class="ctBox">
    
16.                 <p style="text-align:center;"><img alt="570" height="380" src="https://pic.imgdb.cn/item/621b16642ab3f51d9158cb2a.jpg" /><br></p>
    
17.                 <h2 style="padding-bottom: 10px;">囚鸟（彭羚）</h2>
    
18.                 <h2 style="text-align:center;">TO：黑黑</h2>
    
19.                 <pre>
    
20. 
    
21.                           动人的歌曲总有动人的故事
    
22.                           他们的深情
    
23.                           都在那歌曲背后的创作故事里
    
24.                           《囚鸟》表达了繁华都市中
    
25.                           某些人与人之间情感的冷漠
    
26.                           创作者发现在都市里
    
27.                           真情真切的爱越来越少
    
28.                           孤独冷清的日子越来越多
    
29.                           特别失恋的人像是一只囚鸟
    
30.                           渴望爱人能够给自己一点的爱
    
31.                           看似简单的事情却如此遥不可及
    
32.                           只有眼泪与自己作伴肆意流淌
    
33.                         
    
34.                           
    
35.                 </pre>
    
36.                 <p style="margin: auto; width:120px; left:50px;text-align:center; font-size:14px; color:#000;"><marquee  scrollamount="2" direction="left" >囚鸟（彭羚）TO：黑黑</marquee></p>
    
37. 
    
38.                 <p style="text-align:center;"><audio id="myplayer" src="https://oss.shandianpan.com/c84d3f9e428bec21546ba4a31390bf79.mp3" controls="controls" autoplay="autoplay"></audio></p>
    
39.                 <div id="lrcDiv"><ul id="lrcUl"></ul></div>
    
40.                 <p style="margin: 20px; text-align:center;">小辣椒  2022 02 27</p>
    
41.         </div>
    
42. </div>
    
43. <p style="margin: auto; width:420px; left:50px;text-align:center; font-size:14px; color:#000;">
    
44. <script language="javascript">
    
45. 
    
46. var lrcAr = [
    
47. ["00:01.01","歌曲名:囚鸟"],
    
48. ["00:15.23","歌手:彭羚"],
    
49. ["00:20.96","囚鸟 词：十一郎 曲：张宇"],
    
50. ["00:23.89","我是被你囚禁的鸟"],
    
51. ["00:28.38","已经忘了天有多高"],
    
52. ["00:32.87","如果离开你给我的小小城堡"],
    
53. ["00:38.92","不知还有谁能依靠"],
    
54. ["00:42.09","我是被你囚禁的鸟"],
    
55. ["00:46.39","得到的爱越来越少"],
    
56. ["00:51.07","看着你的笑在别人眼中燃烧"],
    
57. ["00:56.93","我却要不到一个拥抱"],
    
58. ["01:02.56","我像是一个你可有可无的影子"],
    
59. ["01:07.60","冷冷的看着你说谎的样子"],
    
60. ["01:11.54","这撩乱的城市"],
    
61. ["01:13.79","容不下我的痴"],
    
62. ["01:16.16","是什么让你这样迷恋这样的放肆"],
    
63. ["01:21.03","我像是一个你可有可无的影子"],
    
64. ["01:25.96","和寂寞交换着悲伤的心事"],
    
65. ["01:30.08","对爱无计可施"],
    
66. ["01:32.34","这无味的日子"],
    
67. ["01:36.70","眼泪是唯一的奢侈"],
    
68. ["01:45.18","LRC编辑：小辣椒"],
    
69. ["02:05.13","我是被你囚禁的鸟"],
    
70. ["02:09.67","已经忘了天有多高"],
    
71. ["02:14.04","如果离开你给我的小小城堡"],
    
72. ["02:19.95","不知还有谁能依靠"],
    
73. ["02:25.55","我像是一个你可有可无的影子"],
    
74. ["02:30.53","冷冷的看着你说谎的样子"],
    
75. ["02:34.59","这撩乱的城市"],
    
76. ["02:36.83","容不下我的痴"],
    
77. ["02:39.20","是什么让你这样迷恋这样的放肆"],
    
78. ["02:43.99","我像是一个你可有可无的影子"],
    
79. ["02:48.93","和寂寞交换着悲伤的心事"],
    
80. ["02:53.04","对爱无计可施"],
    
81. ["02:55.41","这无味的日子"],
    
82. ["02:59.59","眼泪是唯一的奢侈"],
    
83. ["03:08.05","LRC编辑：小辣椒"],
    
84. ["03:29.91","我像是一个你可有可无的影子"],
    
85. ["03:35.28","冷冷的看着你说谎的样子"],
    
86. ["03:39.20","这撩乱的城市"],
    
87. ["03:41.50","容不下我的痴"],
    
88. ["03:43.81","是什么让你这样迷恋这样的放肆"],
    
89. ["03:48.55","我像是一个你可有可无的影子"],
    
90. ["03:53.65","和寂寞交换着悲伤的心事"],
    
91. ["03:57.64","对爱无计可施"],
    
92. ["04:00.02","这无味的日子"],
    
93. ["04:05.82","我的眼泪是唯一的奢侈"],
    
94. ["04:16.17","谢谢欣赏"]
    
95. ];
    
96. var myaud = document.getElementById('myplayer'); //播放器标识
    
97. var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
    
98. //处理lrc歌词数组：时间转换成秒、歌词放入li标签
    
99. for(j=0; j<lrcAr.length; j++){
    
100.         lrcAr[j][0] = toSec(lrcAr[j][0]);
     
101.         lrcUl.innerHTML += "<li id='li" + lrcAr[j][0] + "'>" + lrcAr[j][1] + "</li>";
     
102. }
     
103. //lrc时间信息转为秒
     
104. function toSec(lrcTime) {
     
105.         let tmpAr = lrcTime.split(':');
     
106.         lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
     
107.         return lrcTime;
     
108. }
     
109. //同步高亮、翻滚歌词
     
110. myaud.ontimeupdate = function() {
     
111.         let tt = this.currentTime;
     
112.         for(j=0; j<lrcAr.length; j++){
     
113.                 if(tt > lrcAr[j][0]){
     
114.                         if(j > 0){
     
115.                                 let idxLast = lrcAr[j-1][0];
     
116.                                 document.getElementById("li" + idxLast).style.color = "black";
     
117.                                 lrcUl.style.top ="-" + (j * 20 - 20) + "px";
     
118.                         }
     
119.                         let idx = lrcAr[j][0];
     
120.                         document.getElementById("li" + idx).style.color = "red";
     
121.                 }
     
122.         }
     
123. }
     
124. // 播放结束重置歌词样式
     
125. myaud.onended = function() {
     
126.         document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = "black";
     
127.         lrcUl.style.top = 0;
     
128.         this.play();
     
129. }
     
130. 
     
131. </script>

复制代码

小辣椒

@马黑黑

黑黑，我发现电脑预览和发论坛好像歌词位置不一样

小辣椒

这次我调整到
#lrcUl { position: absolute; left:30px;top: 0; }

小辣椒

还是发现有2个声音

大猫咪

经典老歌，特别喜欢彭羚的声音，辣椒制作真好看 ，老黑收礼开心！

小辣椒

大猫咪 发表于 2022-2-27 14:19
经典老歌，特别喜欢彭羚的声音，辣椒制作真好看 ，老黑收礼开心！

猫猫喜欢这个边框颜色可以套用代码玩

小九

窗外有暖阳，配合着音乐正好，惬意

大猫咪

小辣椒 发表于 2022-2-27 14:22
猫猫喜欢这个边框颜色可以套用代码玩

好   收藏代码了，谢谢辣椒  

小辣椒

小九 发表于 2022-2-27 14:23
窗外有暖阳，配合着音乐正好，惬意

小九辛苦，星期天还没得休息

红影

这个边框颜色暖色调的，漂亮。黑黑收礼开心

加林森

又一个新的制作，好厉害。喜欢的歌曲。

千羽

这个也是很漂亮，小辣椒棒棒哒

千羽

配图亮眼，歌儿好听

千羽

黑黑老师收礼开心

马黑黑

小辣椒 发表于 2022-2-27 14:16
@马黑黑

黑黑，我发现电脑预览和发论坛好像歌词位置不一样

可能会有一些区别，毕竟本地环境是单一环境，而在论坛，帖子会放置于div和表格中，环境变得复杂了，当帖子也用了一些复杂的布局机制，就会受到干扰。

马黑黑

黑黑收礼开森

樵歌

俺就来听歌儿儿好了，其余迷糊。

加林森

继续欣赏