原生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=2022397273.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:18.07]Oh Na na na yeah Ah oh
    
52. [00:24.35]心在跳 是爱情如烈火
    
53. [00:29.07]你在笑 疯狂的人是我
    
54. [00:34.79]爱如火 会温暖了心窝
    
55. [00:39.61]我看见 爱的火焰闪烁
    
56. [00:45.45]从第一刻见到你
    
57. [00:48.59]哦我的心在怦怦跳
    
58. [00:51.86]刻板标准都不重要
    
59. [00:54.98]自你闯入我瞳孔
    
60. [00:58.78]蝴蝶拥着火微笑
    
61. [01:01.26]时间暂停掉
    
62. [01:03.81]你说的每个字
    
63. [01:05.95]我都牢记在心头
    
64. [01:08.56]见面的每一次
    
65. [01:10.72]都有不同的心动
    
66. [01:13.34]我只想一辈子
    
67. [01:15.52]都有你牵我的手
    
68. [01:18.06]走到很久以后
    
69. [01:20.03]Oh my baby
    
70. [01:22.94]心在跳 是爱情如烈火
    
71. [01:27.42]你在笑 疯狂的人是我
    
72. [01:32.35]爱如火 会温暖了心窝
    
73. [01:36.06]我看见 爱的火焰闪烁
    
74. [01:42.27]Na na na na na na yeah
    
75. [01:46.15]Woo woo
    
76. [01:48.02]爱的火焰闪烁
    
77. [01:52.95]Na na na na na na yeah
    
78. [01:56.17]Woo woo my baby
    
79. `;
    
80. 
    
81. /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引*/
    
82. let mKey = 0, mFlag = true;
    
83. 
    
84. /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
    
85. let lrcTime = (ar) => {
    
86.         let tmpAr = [];
    
87.         for(j = 0; j <ar.length - 1; j ++) {
    
88.                 if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
    
89.         }
    
90.         let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
    
91.         tmpAr.push(aver);
    
92.         tmpAr.forEach((item,key) => {
    
93.                 ar[key][2] = item > aver ? aver : item;
    
94.         });
    
95.         return ar;
    
96. };
    
97. 
    
98. /*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
    
99. let getLrcAr = (text) => {
    
100.         let lrcAr = [];
     
101.         let calcRule = [60,1,0.001];
     
102.         for(x of text.split('\n')) {
     
103.                 let ar = [];
     
104.                 let re = /\d+[\.:]\d+([\.:]\d+)?/g;
     
105.                 let geci = x.replace(re,'');
     
106.                 if(geci) {
     
107.                         geci = geci.replace(/[\[\]\'"\t,]s?/g,'');
     
108.                         let time = x.match(re);
     
109.                         if(time != null) {
     
110.                                 for(y of time) {
     
111.                                         let tmp = y.match(/\d+/g);
     
112.                                         let sec = 0;
     
113.                                         for(z in tmp) sec += tmp[z] * calcRule[z];
     
114.                                         ar[0] = [parseFloat(sec.toFixed(2)), geci];
     
115.                                         lrcAr.push(ar[0]);
     
116.                                 }
     
117.                         }
     
118.                 }
     
119.         }
     
120.         lrcAr.sort((a,b)=> a[0] - b[0]);
     
121.         return(lrcTime(lrcAr));
     
122. };
     
123. 
     
124. /*函数 ：模拟显示同步歌词*/
     
125. let showLrc = (time) => {
     
126.         let name = mFlag ? 'cover1' : 'cover2';
     
127.         lrc.innerHTML = lrcAr[mKey][1];
     
128.         lrc.dataset.lrc = lrcAr[mKey][1];
     
129.         lrc.style.setProperty('--motion', name);
     
130.         lrc.style.setProperty('--tt', time + 's');
     
131.         lrc.style.setProperty('--state', 'running');
     
132.         mKey += 1;
     
133.         mFlag = !mFlag;
     
134. };
     
135. 
     
136. /*函数 ：处理当前歌词索引 mKey*/
     
137. let calcKey = () => {
     
138.         for (j = 0; j < lrcAr.length; j++) {
     
139.                 if (aud.currentTime <= lrcAr[j][0]) {
     
140.                         mKey = j - 1;
     
141.                         break;
     
142.                 }
     
143.         }
     
144.         if (mKey < 0) mKey = 0;
     
145.         if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
146.         let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
147.         showLrc(time);
     
148. };
     
149. 
     
150. /*格式化时间信息*/
     
151. let toMin = (val) => {
     
152.         if (!val) return '00:00';
     
153.         val = Math.floor(val);
     
154.         let min = parseInt(val / 60),
     
155.         sec = parseFloat(val % 60);
     
156.         if (min < 10) min = '0' + min;
     
157.         if (sec < 10) sec = '0' + sec;
     
158.         return min + ':' + sec;
     
159. }
     
160. 
     
161. /*函数 ：歌词同步状态切换*/
     
162. let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
163. 
     
164. /*监听播放进度*/
     
165. aud.addEventListener('timeupdate', () => {
     
166.         for (j = 0; j < lrcAr.length; j++) {
     
167.                 if (aud.currentTime >= lrcAr[j][0]) {
     
168.                         cKey = j;
     
169.                         if (mKey === j) showLrc(lrcAr[j][2]);
     
170.                         else continue;
     
171.                 }
     
172.         }
     
173. });
     
174. 
     
175. aud.addEventListener('pause', () => mState());/*监听暂停事件*/
     
176. aud.addEventListener('play', () => mState());/*监听播放事件*/
     
177. aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
     
178. 
     
179. let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
     
180. 
     
181. </script>

复制代码

马黑黑

测试三相关说明：
一、对lrc歌词格式的支持

mm:ss.ms  例：12:02.69 或 02:36.659 或 14:5.8 等
mm:ss:ms  例：12:02:69 或 02:36:659 或 14:5:8 等

并：实现机制能自动过滤多余字符；支持一行中存在多个时间标签（歌词叠句）。

二、歌词变量的书写方式

第一种：写在一行里，每一个原始行单位用 \n 表示，最后一句歌词末尾不加 \n 。歌词属于字符串，所以需要用反引号 ` 或 小角单引号 ' 或 小角双引号 " 将歌词包裹起来。例：

let lrcStr = `[00:02.00]歌词一\n[00:08:19]歌词二\n[00:16:68]歌词N`;

第二种：分行写。分行写只能使用反引号将歌词包裹起来。各行可以顶格或退格书写。分行书写时，行尾不能有 \n 符号。例：

let lrcStr = `
    [00:02.00]歌词一
    [00:08:19]歌词二
    [00:16:68]歌词N
`;

不论何种书写方式，歌词内若有小角引号 ' ，请将其转义，写成 ： \'

三、其他未尽事宜碰到再说

梦油

欣赏美乐，问候朋友。

马黑黑

梦油 发表于 2023-2-19 09:06
欣赏美乐，问候朋友。

感谢支持

红影

黑黑越修改越完美了，厉害

梦油

马黑黑 发表于 2023-2-19 10:14
感谢支持

别客气。

马黑黑

红影 发表于 2023-2-19 11:19
黑黑越修改越完美了，厉害

马黑黑

醉美水芙蓉 发表于 2023-2-19 12:54
老师厉害！这么快就做好了！

这个，有部分是原来做好的

小辣椒

原来黑黑已经捣鼓三次了

马黑黑

小辣椒 发表于 2023-2-19 13:26
原来黑黑已经捣鼓三次了

还需要鼓捣

小辣椒

马黑黑 发表于 2023-2-19 13:57
还需要鼓捣

黑黑我直接套用以前做的，感觉还是你的精确度高，你这个是逐字逐句的，我那以前是一整句出来的，应该很完美，我还没有上传，马上就好的

马黑黑

小辣椒 发表于 2023-2-19 14:00
黑黑我直接套用以前做的，感觉还是你的精确度高，你这个是逐字逐句的，我那以前是一整句出来的，应该很完 ...

好的

梦缘

谢谢老师的代码分享，问好！

马黑黑

梦缘 发表于 2023-2-19 14:35
谢谢老师的代码分享，问好！

下午好

起个网名好难

马黑黑 发表于 2023-2-19 08:51
测试三相关说明：
一、对lrc歌词格式的支持

请教疑问

for(z in tmp) sec += tmp[z] * calcRule[z];

14:5.8 按这样计算得到 14*60+5+0.008 ， 毫秒无形中就被去掉了。

geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');

如果去掉其中的 \'\" 就不需要对歌词中的引号转义了。

马黑黑

起个网名好难 发表于 2023-2-21 07:18
请教疑问

14:5.8 按这样计算得到 14*60+5+0.008 ， 毫秒无形中就被去掉了。

也是

起个网名好难

马黑黑

起个网名好难 发表于 2023-2-21 07:34

感谢反馈。新做的函数已经改变了机制。