原生lrc歌词同步（测试二）

马黑黑

HCPlayer

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         padding: 20px;
   
5.         width: 700px;
   
6.         height: 400px;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9. }
   
10. #lrc {
    
11.         --motion: cover2;
    
12.         --tt: 2s;
    
13.         --state: paused;
    
14.         --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
    
15.         position: absolute;
    
16.         font: bold 2em sans-serif;
    
17.         color: snow;
    
18.         white-space: pre;
    
19.         -webkit-background-clip: text;
    
20.         filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
    
21. }
    
22. #lrc::before {
    
23.         position: absolute;
    
24.         content: attr(data-lrc);
    
25.         width: 20%;
    
26.         height: 100%;
    
27.         color: transparent;
    
28.         overflow: hidden;
    
29.         white-space: pre;
    
30.         background: var(--bg);
    
31.         filter: inherit;
    
32.         -webkit-background-clip: text;
    
33.         animation: var(--motion) var(--tt) linear forwards;
    
34.         animation-play-state: var(--state);
    
35. }
    
36. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
37. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
38. @keyframes rot { to { transform: rotate(1turn); } }
    
39. </style>
    
40. 
    
41. <div id="papa">
    
42.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2015286363.mp3" controls loop autoplay></audio>
    
43.         <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
    
44. </div>
    
45. 
    
46. <script>
    
47. 
    
48. /*原始lrc歌词*/
    
49. let lrcStr = `
    
50. [00:02.00]韩红 - 望
    
51. [00:12.27]长风落进斜阳
    
52. [00:18.24]悲歌多断肠
    
53. [00:24.06]一卷天下涛与浪
    
54. [00:30.97]惊魂破绝然踏蹄扬
    
55. [00:36.88]燃尽卑微的我
    
56. [00:42.79]无声轻轻坠落
    
57. [00:48.94]怀一腔血赤胆忠良
    
58. [00:54.55]撑一撑就到天亮
    
59. [00:59.99]迢迢归乡之路
    
60. [01:05.90]孤单伴着满足
    
61. [01:11.31]曾几时梦里
    
62. [01:14.28]遇见过你
    
63. [01:17.13]就此别过亦是幸福
    
64. [01:23.10]遥遥壮烈时刻
    
65. [01:29.89]幸得慷慨一搏
    
66. [01:35.98]不畏浮云遮望眼
    
67. [01:41.83]何惧世间起浓烟
    
68. [01:47.06]唱一生忠义
    
69. [01:52.68]颂英雄之躯
    
70. [01:58.53]蓦然间回首
    
71. [02:01.29]收紧了心头
    
72. [02:04.41]听那首人间悲曲
    
73. [02:10.50]一曲悲歌
    
74. [02:13.29]一世离合
    
75. [02:16.23]皆化作山河
    
76. [02:22.05]一曲悲歌
    
77. [02:25.02]一世离合
    
78. [02:28.08]仰天长啸一首歌
    
79. [02:32:99]感谢欣赏
    
80. `;
    
81. 
    
82. /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引*/
    
83. let mKey = 0, mFlag = true;
    
84. 
    
85. /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
    
86. let lrcTime = (ar) => {
    
87.         let tmpAr = [];
    
88.         for(j = 0; j <ar.length - 1; j ++) {
    
89.                 if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
    
90.         }
    
91.         let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
    
92.         tmpAr.push(aver);
    
93.         tmpAr.forEach((item,key) => {
    
94.                 ar[key][2] = item > aver ? aver : item;
    
95.         });
    
96.         return ar;
    
97. };
    
98. 
    
99. /*函数 ：从原始lrc歌词获取信息并存入 n*2 数组*/
    
100. let getLrcAr = (str) => {
     
101.         str = str.trim();
     
102.         let lines = [], lrcAr = [];
     
103.         let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
     
104.         if(!str.match(reg)) return;
     
105.         lines = str.replace(reg,'$1-{}-$2').split('\n');
     
106.         for(k = 0; k < lines.length; k ++) {
     
107.                 lrcAr[k] = [];
     
108.                 for(j = 0; j < 3; j ++) {
     
109.                         let tmpAr = lines[k].split('-{}-');
     
110.                         lrcAr[k][j] = j === 0 ? toSecs(tmpAr[0]) : tmpAr[1];
     
111.                 }
     
112.         }
     
113.         return lrcTime(lrcAr); /* 数组变为 n*3 */
     
114. };
     
115. 
     
116. /*函数 ：原始lrc时间转为秒数*/
     
117. let toSecs = (lrcTime) => {
     
118.         let reg = /\d{2,}/g;
     
119.         let ar = lrcTime.match(reg);
     
120.         return ar[0]*60 + parseInt(ar[1]) + parseInt((ar[2])/1000);
     
121. };
     
122. 
     
123. /*函数 ：模拟显示同步歌词*/
     
124. let showLrc = (time) => {
     
125.         let name = mFlag ? 'cover1' : 'cover2';
     
126.         lrc.innerHTML = lrcAr[mKey][1];
     
127.         lrc.dataset.lrc = lrcAr[mKey][1];
     
128.         lrc.style.setProperty('--motion', name);
     
129.         lrc.style.setProperty('--tt', time + 's');
     
130.         lrc.style.setProperty('--state', 'running');
     
131.         mKey += 1;
     
132.         mFlag = !mFlag;
     
133. };
     
134. 
     
135. /*函数 ：处理当前歌词索引 mKey*/
     
136. let calcKey = () => {
     
137.         for (j = 0; j < lrcAr.length; j++) {
     
138.                 if (aud.currentTime <= lrcAr[j][0]) {
     
139.                         mKey = j - 1;
     
140.                         break;
     
141.                 }
     
142.         }
     
143.         if (mKey < 0) mKey = 0;
     
144.         if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
145.         let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
146.         showLrc(time);
     
147. };
     
148. 
     
149. /*格式化时间信息*/
     
150. let toMin = (val) => {
     
151.         if (!val) return '00:00';
     
152.         val = Math.floor(val);
     
153.         let min = parseInt(val / 60),
     
154.         sec = parseFloat(val % 60);
     
155.         if (min < 10) min = '0' + min;
     
156.         if (sec < 10) sec = '0' + sec;
     
157.         return min + ':' + sec;
     
158. }
     
159. 
     
160. /*函数 ：歌词同步状态切换*/
     
161. let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
162. 
     
163. /*监听播放进度*/
     
164. aud.addEventListener('timeupdate', () => {
     
165.         for (j = 0; j < lrcAr.length; j++) {
     
166.                 if (aud.currentTime >= lrcAr[j][0]) {
     
167.                         cKey = j;
     
168.                         if (mKey === j) showLrc(lrcAr[j][2]);
     
169.                         else continue;
     
170.                 }
     
171.         }
     
172. });
     
173. 
     
174. aud.addEventListener('pause', () => mState());/*监听暂停事件*/
     
175. aud.addEventListener('play', () => mState());/*监听播放事件*/
     
176. aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
     
177. 
     
178. let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
     
179. 
     
180. </script>

复制代码

马黑黑

此测试与测试一相比：解决分行歌词的问题，即，原始lrc歌词可以是这样定义——

let lrcStr = `
[00:02.00]第一句歌词
[00:12.27]第二句歌词
[00:18.24]第N句歌词
`;

你若喜欢，每句歌词信息可以不顶格

马黑黑

说明一下：网络lrc歌词，正如 @小辣椒 所说的，都不太准确，有条件、有时间还是自己制作的好，这类软件还是很多的。如果不想自己制作，那么，可以自己调整，大约仅调整秒数就好

起个网名好难

parseInt((ar[2])/1000)  恒等于 0

红影

歌词信息顶格和不顶格没明白是怎么回事。

红影

黑黑一弄再弄，辛苦了

马黑黑

红影 发表于 2023-2-18 21:50
黑黑一弄再弄，辛苦了

辛苦谈不上

庶民

好方式，有创意！

马黑黑

庶民 发表于 2023-2-19 05:05
好方式，有创意！

小辣椒

小辣椒迟到的观众

马黑黑

起个网名好难 发表于 2023-2-18 21:05
parseInt((ar[2])/1000)  恒等于 0

对，强制整数。开始用的是parseFloat，后来反复修改改错地方了。

马黑黑

小辣椒 发表于 2023-2-19 13:27
小辣椒迟到的观众

测试中，没关系

起个网名好难

马黑黑 发表于 2023-2-19 13:56
对，强制整数。开始用的是parseFloat，后来反复修改改错地方了。

反正是秒也就无所谓了

马黑黑

起个网名好难 发表于 2023-2-19 15:50
反正是秒也就无所谓了

嗯，试过效果，区别肉眼几乎看不出

起个网名好难

马黑黑 发表于 2023-2-19 18:14
嗯，试过效果，区别肉眼几乎看不出

确实

起个网名好难

马黑黑 发表于 2023-2-19 18:14
嗯，试过效果，区别肉眼几乎看不出

请教  “获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值” 有什么根据

红影

马黑黑 发表于 2023-2-18 23:10
辛苦谈不上

前面光顾着看代码了，现在听来这首还真好听呢

马黑黑

红影 发表于 2023-2-19 18:47
前面光顾着看代码了，现在听来这首还真好听呢

猜猜谁唱的