学习黑黑歌词同步高亮制作

小辣椒

痛彻心扉

歌手--小希 (馨予）

                

                          看见黑黑今天分享的
                          歌词同步高亮制作                      
                          在这个css边框中测试一下
                          感觉这个歌词同步高亮效果
                          加上这个边框特别漂亮
                          这样分享音乐也是不错
                          感谢黑黑又一个精彩分享
                          黑黑你太厉害了 精彩不断！
                          
                          还有一个问题问黑黑老师
                          这个播放器是手动播放
                          我改了自动播放代码 播放器看不见了
                          

                                
          















                

学习黑黑歌词同步高亮制作

小辣椒 2022 02 23

小辣椒

@马黑黑

黑黑，这个我也是自己瞎捣鼓的，播放器不能改自动播放，改了播放器没有了

加林森

小辣椒厉害啊，制作得很漂亮。

小辣椒

加林森 发表于 2022-2-23 22:26
小辣椒厉害啊，制作得很漂亮。

队长好，还没有改成功自动播放，要黑黑来指导了

加林森

小辣椒 发表于 2022-2-23 22:32
队长好，还没有改成功自动播放，要黑黑来指导了

已经同步了啊

小辣椒

加林森 发表于 2022-2-23 22:41
已经同步了啊

现在是手动播放，最好可以自动播放

加林森

小辣椒 发表于 2022-2-23 22:45
现在是手动播放，最好可以自动播放

老黑说过想变成自动，就取消应该什么代码，我忘记了。你去看看吧。

红影

亲爱的厉害，灵活运用这个歌词同步

马黑黑

小辣椒 发表于 2022-2-23 22:08
@马黑黑

黑黑，这个我也是自己瞎捣鼓的，播放器不能改自动播放，改了播放器没有了

代码有些小问题，还有点凌乱。需要重新组织一下：

1. <style type="text/css">
   
2. 
   
3. .mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
   
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:10px;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="550" height="362" src="https://pic.imgdb.cn/item/6216210d2ab3f51d91f0f16b.jpg" /><br></p>
    
17.                 <h2 style="padding-bottom: 10px;">痛彻心扉</h2>
    
18.                 <h2 style="text-align:center;">歌手--小希 (馨予）</h2>
    
19.                 <pre>
    
20. 
    
21.                           看见黑黑今天分享的
    
22.                           歌词同步高亮制作                     
    
23.                           在这个css边框中测试一下
    
24.                           感觉这个歌词同步高亮效果
    
25.                           加上这个边框特别漂亮
    
26.                           这样分享音乐也是不错
    
27.                           感谢黑黑又一个精彩分享
    
28.                           黑黑你太厉害了 精彩不断！
    
29.                           
    
30.                           还有一个问题问黑黑老师
    
31.                           这个播放器是手动播放
    
32.                           我改了自动播放代码 播放器看不见了
    
33.                           
    
34.                 </pre>
    
35.                 <p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marquee  scrollamount="2" direction="left" >学习黑黑歌词同步高亮制作</marquee></p>
    
36.                 <p style="text-align:center;"><audio id="myplayer" src="https://oss.shandianpan.com/deba64b09196f48dcde864caf63ceee9.mp3" controls="controls" autoplay="autoplay"></audio></p>
    
37.                 <div id="lrcDiv"><ul id="lrcUl"></ul></div>
    
38.                 <p style="margin: 20px; text-align:center;">小辣椒  2022 02 23</p>
    
39.         </div>
    
40. </div>
    
41. 
    
42. <script language="javascript">
    
43. 
    
44. var lrcAr = [
    
45. ["00:00.11"," 手动播放"],
    
46. ["00:03.11"," 痛彻心扉"],
    
47. ["00:10.48"," 歌手：小希 (馨予)"],
    
48. ["00:16.76"," LRC编辑：小辣椒"],
    
49. ["00:21.64"," 怎么能够让我不再想你"],
    
50. ["00:27.07"," 也许爱你爱到最后只能伤心"],
    
51. ["00:33.60"," 已经有了离开你的勇气"],
    
52. ["00:39.83"," 在我的梦里你不是唯一"],
    
53. ["00:46.26"," 我想要再回到你温暖的怀里"],
    
54. ["00:53.24"," 感觉你的心跳你的呼吸"],
    
55. ["00:59.68"," 想到天长地久对于我们"],
    
56. ["01:04.36"," 渴望而不可及"],
    
57. ["01:06.75"," 难道命运注定就此分离"],
    
58. ["01:13.83"," 啊。。。"],
    
59. ["01:16.91"," 爱你痛彻我心扉"],
    
60. ["01:22.56"," 给了你仅有的一片天"],
    
61. ["01:29.03"," 回忆的碎片撞翻我心中思念的火蕊"],
    
62. ["01:35.95"," 燃烧我整座的堡垒"],
    
63. ["01:42.15"," 啊。。。"],
    
64. ["01:44.73"," 爱你痛彻我心扉"],
    
65. ["01:49.31"," 少了你还残留一片天"],
    
66. ["01:55.45"," 我想我只会紧握住手中凋零的玫瑰"],
    
67. ["02:02.83"," 品尝你赐给的泪水"],
    
68. ["02:08.91"," 或许你曾为我流泪"],
    
69. ["02:15.44"," 如今你让我痛彻心扉"],
    
70. ["02:24.03"," LRC编辑：小辣椒"],
    
71. ["02:48.19"," 我想要再回到你温暖的怀里"],
    
72. ["02:55.01"," 感觉你的心跳你的呼吸"],
    
73. ["03:01.24"," 想到天长地久对于我们"],
    
74. ["03:05.87"," 渴望而不可及"],
    
75. ["03:08.22"," 难道命运注定就此分离"],
    
76. ["03:15.46"," 啊。。。"],
    
77. ["03:18.50"," 爱你痛彻我心扉"],
    
78. ["03:24.18"," 给了你仅有的一片天"],
    
79. ["03:30.36"," 回忆的碎片撞翻我心中思念的火蕊"],
    
80. ["03:37.54"," 燃烧我整座的堡垒"],
    
81. ["03:43.55"," 啊。。。"],
    
82. ["03:46.38"," 爱你痛彻我心扉"],
    
83. ["03:51.02"," 少了你还残留一片天"],
    
84. ["03:57.20"," 我想我只会紧握住手中凋零的玫瑰"],
    
85. ["04:04.53"," 品尝你赐给的泪水"],
    
86. ["04:10.56"," 或许你曾为我流泪"],
    
87. ["04:17.09"," 如今你让我痛彻心扉"],
    
88. ["04:27.51"," 谢谢欣赏"]
    
89. ];
    
90. var myaud = document.getElementById('myplayer'); //播放器标识
    
91. var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
    
92. //处理lrc歌词数组：时间转换成秒、歌词放入li标签
    
93. for(j=0; j<lrcAr.length; j++){
    
94.         lrcAr[j][0] = toSec(lrcAr[j][0]);
    
95.         lrcUl.innerHTML += "<li id='li" + lrcAr[j][0] + "'>" + lrcAr[j][1] + "</li>";
    
96. }
    
97. //lrc时间信息转为秒
    
98. function toSec(lrcTime) {
    
99.         let tmpAr = lrcTime.split(':');
    
100.         lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
     
101.         return lrcTime;
     
102. }
     
103. //同步高亮、翻滚歌词
     
104. myaud.ontimeupdate = function() {
     
105.         let tt = this.currentTime;
     
106.         for(j=0; j<lrcAr.length; j++){
     
107.                 if(tt > lrcAr[j][0]){
     
108.                         if(j > 0){
     
109.                                 let idxLast = lrcAr[j-1][0];
     
110.                                 document.getElementById("li" + idxLast).style.color = "black";
     
111.                                 lrcUl.style.top ="-" + (j * 20 - 20) + "px";
     
112.                         }
     
113.                         let idx = lrcAr[j][0];
     
114.                         document.getElementById("li" + idx).style.color = "red";
     
115.                 }
     
116.         }
     
117. }
     
118. // 播放结束重置歌词样式
     
119. myaud.onended = function() {
     
120.         document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = "black";
     
121.         lrcUl.style.top = 0;
     
122.         this.play();
     
123. }
     
124. 
     
125. </script>

复制代码

马黑黑

加林森 发表于 2022-2-23 22:48
老黑说过想变成自动，就取消应该什么代码，我忘记了。你去看看吧。

不是这样的，我说的是循环播放。自动播放在 audio 代码加 autoplay="autoplay"，或在JS代码加入：

或 myaud.autoplay = true;
或 myaud.play();

加林森

马黑黑 发表于 2022-2-23 23:17
不是这样的，我说的是循环播放。自动播放在 audio 代码加 autoplay="autoplay"，或在JS代码加入：

或  ...

嗯嗯，下就的制作一个是成功了吧。

小辣椒

黑黑这个自动播放修改好了，谢谢，我可以发上去分享了。

杨柳青

都是代码专家~~~~

小辣椒

马黑黑 发表于 2022-2-23 23:17
不是这样的，我说的是循环播放。自动播放在 audio 代码加 autoplay="autoplay"，或在JS代码加入：

或  ...

黑黑，我发现这个手动播放出来是好的，那个自动播放出来有2个声音了

加林森

继续来研究。

马黑黑

小辣椒 发表于 2022-2-23 23:30
黑黑，我发现这个手动播放出来是好的，那个自动播放出来有2个声音了

不会的吧？我这里测试没问题，除非你弄了两个播放器

马黑黑

加林森 发表于 2022-2-23 23:20
嗯嗯，下就的制作一个是成功了吧。

加林森

马黑黑 发表于 2022-2-24 12:09

谢谢！

马黑黑

加林森 发表于 2022-2-24 12:38
谢谢！

客气了

加林森

马黑黑 发表于 2022-2-24 21:21
客气了

应该的应该的