星辰如眸（单曲播放器+歌词同步）

马黑黑

·

歌词同步显示

大猫咪

马黑黑 发表于 2022-9-28 20:41
黑黑更健康

                               
登录/注册后可看大图

非常同意  

加林森

有点扯字呢？

加林森

结果是我的电脑用久了，浏览器累了吧。

加林森

老黑这个制作好科幻哦。

马黑黑

加林森 发表于 2022-2-16 20:57
结果是我的电脑用久了，浏览器累了吧。

刷新一下，或退出浏览器再进，必要时重新启动电脑。这个帖子，不消耗什么资源，我专门看过的。

马黑黑

加林森 发表于 2022-2-16 20:58
老黑这个制作好科幻哦。

就是歌词同步吧，中午做好的

马黑黑

全帖代码分享：

1. <style>
   
2. #bigPa { position: relative; left:-203px; width: 1000px; height: 569px; background:#333 url('/data/attachment/forum/202202/16/205041jgtngnddt1xnxpvg.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;  }
   
3. #gcDiv { width: 300px; float: right; }
   
4. #paDiv { position: relative; top: 10px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
   
5. #jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
   
6. #btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
   
7. #lrcDiv { position: relative; top: 20px; color: #A4D1D7; font-size: 1em; text-shadow: 1px 1px 2px #000; }
   
8. #btn-ro:hover { opacity: 0.8; }
   
9. #btn-ro:active { opacity: 1; }
   
10. @keyframes rol { to { transform:rotate(360deg); } }
    
11. </style>
    
12. 
    
13. <div id="bigPa">
    
14.         <div id="gcDiv">
    
15.                 <!-- 播放器开始 -->
    
16.                 <div id="paDiv">
    
17.                         <div id="btn-ro">·</div><!-- 播放按钮 -->
    
18.                         <div id="jindu"><div id="jd-go"></div></div>
    
19.                 </div>
    
20.                 <!-- 播放器结束 -->
    
21.                 <div id="lrcDiv">歌词同步显示</div>
    
22.         </div>
    
23. </div>
    
24. 
    
25. <script language="javascript">
    
26. 
    
27. var lrcAr=[
    
28. ["00:00.00","星辰如眸 (《一见倾心》电视剧片头曲) - 司南"],
    
29. ["00:02.15","词：浅紫"],
    
30. ["00:02.49","曲：浅紫"],
    
31. ["00:02.83","编曲：王德隆"],
    
32. ["00:03.40","和声：司南"],
    
33. ["00:03.85","和声编写：涂忆"],
    
34. ["00:04.55","吉他：陈麒元"],
    
35. ["00:05.15","混音：陈秋洁"],
    
36. ["00:05.73","制作人：江潮"],
    
37. ["00:06.27","监制：浅紫"],
    
38. ["00:06.75","歌曲制作公司：众匠（北京）文化传媒有限公司"],
    
39. ["00:16.41","清晨 烟雨 黄昏 倾世温柔"],
    
40. ["00:23.97","少年 戎装 驰骋 星辰如眸"],
    
41. ["00:31.47","眼神 温暖 坚定 漫笑浮生"],
    
42. ["00:38.18","是一段风华 一指流砂 蓦然回首"],
    
43. ["00:46.33","冬天 雪花飘落的季节"],
    
44. ["00:52.20","你怀中却似春天 花香布满了世间"],
    
45. ["00:59.60","良辰好景入夏天 树荫遮住了眷恋"],
    
46. ["01:07.16","沁心于你在秋天 情深绵绵散落"],
    
47. ["01:14.72","叶翩翩 情渐渐"],
    
48. ["01:24.05","清晨 烟雨 黄昏 倾世温柔"],
    
49. ["01:31.50","少年 戎装 驰骋 星辰如眸"],
    
50. ["01:38.84","眼神 温暖 坚定 漫笑浮生"],
    
51. ["01:45.66","是一段风华 一指流砂 蓦然回首"],
    
52. ["01:54.01","冬天 雪花飘落的季节"],
    
53. ["01:59.66","你怀中却似春天 花香布满了世间"],
    
54. ["02:07.13","良辰好景入夏天 树荫遮住了眷恋"],
    
55. ["02:14.60","沁心于你在秋天 情深绵绵散落"],
    
56. ["02:22.09","叶翩翩 情渐渐"],
    
57. ["02:27.86","冬天 雪花飘落的季节"],
    
58. ["02:33.34","你怀中却似春天 花香布满了世间"],
    
59. ["02:40.87","良辰好景入夏天 树荫遮住了眷恋"],
    
60. ["02:48.37","沁心于你在秋天 情深绵绵散落"],
    
61. ["02:55.89","叶翩翩 情渐渐"],
    
62. ];
    
63. 
    
64. var lrcDiv = document.getElementById('lrcDiv');
    
65. var btn = document.getElementById('btn-ro');
    
66. var jindu = document.getElementById('jindu');
    
67. var aud = document.createElement('audio');
    
68. // 音乐地址放在下行引号内
    
69. aud.src = "http://www.kumeiwp.com/sub/filestores/2022/02/15/cb5d2b49bf5b7fa52e682ce6c6b0c405.mp3";
    
70. aud.loop = true;
    
71. aud.autoplay = true;
    
72. aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
    
73. aud.addEventListener('timeupdate', tmMsg, true);
    
74. 
    
75. function tmMsg(){ //进度条
    
76.         let auT = Math.floor(aud.duration - aud.currentTime);
    
77.         let auM = auT / 60;
    
78.         let auMs = parseInt(auM);
    
79.         if (auMs <10) auMs = "0" + auMs;
    
80.         let auS = auT % 60;
    
81.         let auSs = Math.round(auS);
    
82.         if (auSs < 10) auSs = "0" + auSs;
    
83.         jindu.innerHTML = "- " + auMs +":" + auSs;
    
84.         let jd = (100*aud.currentTime)/aud.duration;
    
85.         jindu.style.backgroundSize = jd+ "% 8px";
    
86. }
    
87. 
    
88. jindu.onclick = function(){ //进度控制
    
89.         let w = offset(jindu,"left");
    
90.         let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
    
91.         aud.currentTime = x;
    
92. }
    
93. 
    
94. function offset(obj,direction){//获取父级元素偏移总量
    
95.         let offsetDir = "offset" + direction[0].toUpperCase()+direction.substring(1);
    
96.         let realNum = obj[offsetDir];
    
97.         let positionParent = obj.offsetParent;
    
98.         while(positionParent != null){
    
99.                 realNum += positionParent[offsetDir];
    
100.                 positionParent = positionParent.offsetParent;
     
101.         }
     
102.         return realNum;
     
103. }
     
104. 
     
105. btn.onclick = function(){ // 暂停&播放
     
106.         aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
     
107. }
     
108. 
     
109. //处理lrc歌词数组：时间转换成秒
     
110. for(j=0; j<lrcAr.length; j++){
     
111.         lrcAr[j][0] = toSec(lrcAr[j][0]);
     
112. }
     
113. 
     
114. //lrc时间信息转为秒
     
115. function toSec(lrcTime) {
     
116.         let tmpAr = lrcTime.split(':');
     
117.         lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
     
118.         return lrcTime;
     
119. }
     
120. 
     
121. //同步显示歌词
     
122. aud.ontimeupdate = function() {
     
123.         let tt = this.currentTime;
     
124.         for(j=0; j<lrcAr.length; j++){
     
125.                 if(tt > lrcAr[j][0]) lrcDiv.innerHTML = lrcAr[j][1];
     
126.         }
     
127. }
     
128. 
     
129. </script>

复制代码

加林森

马黑黑 发表于 2022-2-16 21:02
就是歌词同步吧，中午做好的

我得慢慢学了。

加林森

马黑黑 发表于 2022-2-16 21:02
刷新一下，或退出浏览器再进，必要时重新启动电脑。这个帖子，不消耗什么资源，我专门看过的。

嗯嗯，我知道的。

马黑黑

加林森 发表于 2022-2-16 21:14
嗯嗯，我知道的。

挺好的

马黑黑

加林森 发表于 2022-2-16 21:12
我得慢慢学了。

这个，会用就好

加林森

马黑黑 发表于 2022-2-16 21:33
挺好的

谢谢！

加林森

马黑黑 发表于 2022-2-16 21:34
这个，会用就好

一定要制作出来给你看看。

马黑黑

加林森 发表于 2022-2-16 21:37
一定要制作出来给你看看。

应该没什么问题，找到好的lrc歌词并制作好JS数组

加林森

马黑黑 发表于 2022-2-16 21:40
应该没什么问题，找到好的lrc歌词并制作好JS数组

嗯嗯，明白的。

小辣椒

啊···这个是歌词同步啊

马黑黑

小辣椒 发表于 2022-2-16 22:38
啊···这个是歌词同步啊

你才发现？在我的地儿有说明

小辣椒

我起码得星期五晚上做了

小辣椒

马黑黑 发表于 2022-2-16 22:40
你才发现？在我的地儿有说明

我去看看

红影

加林森 发表于 2022-2-16 20:55
有点扯字呢？

评分后会这样，估计和评分系统存在的问题有关，我这里也是。刷新就好了。