原生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=2021373243.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 = `[00:02.00]Kirsty刘瑾睿 - 若把你\n[00:03.99]总有一些话来不及说了\n[00:09.51]总有一个人是心口的朱砂\n[00:16.02]想起那些话那些傻眼泪落下\n[00:22.98]只留一句你现在好吗\n[00:30.60]如果爱忘了泪不想落下\n[00:37.14]那些幸福啊让她替我到达\n[00:43.59]如果爱懂了承诺的代价\n[00:50.10]不能给我的请完整给她\n[01:08.86]总有些牵挂旧的像伤疤\n[01:14.49]越是不碰它越隐隐的痛在那\n[01:21.61]想你的脸颊你的发我不害怕\n[01:27.78]就让时间给我们回答\n[01:34.00]如果爱忘了泪不想落下\n[01:40.35]那些幸福啊让她替我到达\n[01:46.06]如果爱懂了承诺的代价\n[01:53.37]不能给我的请完整给她\n[02:01.87]我说我忘了不痛了\n[02:05.68]那是因为太爱太懂了\n[02:07.86]笑了原谅了为你也值得\n[02:13.98]用你的快乐告诉我\n[02:17.43]现在放开双手是对的\n[02:20.55]别管我多舍不得\n[02:25.83]如果爱忘了就放他走吧\n[02:32.28]那些幸福啊让她替我到达\n[02:38.79]如果爱懂了承诺的代价\n[02:45.30]不能给我的请完整给她`;
    
50. 
    
51. /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引*/
    
52. let mKey = 0, mFlag = true;
    
53. 
    
54. /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
    
55. let lrcTime = (ar) => {
    
56.         let tmpAr = [];
    
57.         for(j = 0; j <ar.length - 1; j ++) {
    
58.                 if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
    
59.         }
    
60.         let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
    
61.         tmpAr.push(aver);
    
62.         tmpAr.forEach((item,key) => {
    
63.                 ar[key][2] = item > aver ? aver : item;
    
64.         });
    
65.         return ar;
    
66. };
    
67. 
    
68. /*函数 ：从原始lrc歌词获取信息并存入 n*2 数组*/
    
69. let getLrcAr = (str) => {
    
70.         let lines = [], lrcAr = [];
    
71.         let reg = /\[(\d{2,}:\d{2,}.\d{2,})\](.*)/g;
    
72.         if(!str.match(reg)) return;
    
73.         lines = str.replace(reg,'$1-{}-$2').split('\n');
    
74.         for(k = 0; k < lines.length; k ++) {
    
75.                 lrcAr[k] = [];
    
76.                 for(j = 0; j < 3; j ++) {
    
77.                         let tmpAr = lines[k].split('-{}-');
    
78.                         lrcAr[k][j] = j === 0 ? toSecs(tmpAr[0]) : tmpAr[1];
    
79.                 }
    
80.         }
    
81.         return lrcTime(lrcAr); /* 数组变为 n*3 */
    
82. };
    
83. 
    
84. /*函数 ：原始lrc时间转为秒数*/
    
85. let toSecs = (lrcTime) => {
    
86.         let reg = /\d{2,}/g;
    
87.         let ar = lrcTime.match(reg);
    
88.         return parseInt(ar[0])*60 + parseInt(ar[1]) + parseInt(ar[2])/1000;
    
89. };
    
90. 
    
91. /*函数 ：模拟显示同步歌词*/
    
92. let showLrc = (time) => {
    
93.         let name = mFlag ? 'cover1' : 'cover2';
    
94.         lrc.innerHTML = lrcAr[mKey][1];
    
95.         lrc.dataset.lrc = lrcAr[mKey][1];
    
96.         lrc.style.setProperty('--motion', name);
    
97.         lrc.style.setProperty('--tt', time + 's');
    
98.         lrc.style.setProperty('--state', 'running');
    
99.         mKey += 1;
    
100.         mFlag = !mFlag;
     
101. };
     
102. 
     
103. /*函数 ：处理当前歌词索引 mKey*/
     
104. let calcKey = () => {
     
105.         for (j = 0; j < lrcAr.length; j++) {
     
106.                 if (aud.currentTime <= lrcAr[j][0]) {
     
107.                         mKey = j - 1;
     
108.                         break;
     
109.                 }
     
110.         }
     
111.         if (mKey < 0) mKey = 0;
     
112.         if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
113.         let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
114.         showLrc(time);
     
115. };
     
116. 
     
117. /*格式化时间信息*/
     
118. let toMin = (val) => {
     
119.         if (!val) return '00:00';
     
120.         val = Math.floor(val);
     
121.         let min = parseInt(val / 60),
     
122.         sec = parseFloat(val % 60);
     
123.         if (min < 10) min = '0' + min;
     
124.         if (sec < 10) sec = '0' + sec;
     
125.         return min + ':' + sec;
     
126. }
     
127. 
     
128. /*函数 ：歌词同步状态切换*/
     
129. let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
130. 
     
131. /*监听播放进度*/
     
132. aud.addEventListener('timeupdate', () => {
     
133.         for (j = 0; j < lrcAr.length; j++) {
     
134.                 if (aud.currentTime >= lrcAr[j][0]) {
     
135.                         cKey = j;
     
136.                         if (mKey === j) showLrc(lrcAr[j][2]);
     
137.                         else continue;
     
138.                 }
     
139.         }
     
140. });
     
141. 
     
142. aud.addEventListener('pause', () => mState());/*监听暂停事件*/
     
143. aud.addEventListener('play', () => mState());/*监听播放事件*/
     
144. aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
     
145. 
     
146. let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
     
147. 
     
148. </script>

复制代码

马黑黑

lrc歌词使用 lrcStr 变量装载，支持多行的书写格式：

let lrcStr = `[00:02.000]歌词一
[00:04:102]歌词二
[00:10:69]歌词N`;

上述变量的书写格式，要求每句歌词信息写一行，等号之后有反引号 ` ，歌词结束时冒号之前也有反引号 ` ，亦即，歌词是用反引号包裹起来的，另外注意，每句歌词最好是顶格书写。还必须特别注意的是，由于没有做特别处理，头反引号之后必须马上跟歌词信息、尾反引号紧跟在歌词之后。
另一种写法，单行写法：

let lrcStr = `[00:02.000]歌词一\n[00:04:102]歌词二\n[00:10:69]歌词N`;


单行写法，也最好使用反引号将歌词包裹起来，当然使用小角双引号或单引号也可以。不论何种写法，若歌词中存在单引号或双引号，请将其转义，方式是在小角单或双引号之前加符号 \ ，例如 ： I‘m a man 要写成 I\'m a man

马黑黑

脚本程序测试中，不一定理想。这里简单说说实现原理：

每句歌词演唱用时这样获取：

首先获取 歌词总数减一 的所有歌词的每一句的用时，方法是用下一句的开始时间减去当前句的开始时间，然后计算其平均值，最后一句歌词取平均值。

然后，检测每一句歌词业已获得的用时，如果超出平均值则取平均值。

这个实现机制不一定靠谱，可能需要使用者观察一下原始歌词，必要时手动调整一下。比方讲，假如几乎每一句的用时是5秒，但由于歌词分上下两部分或更多，这些部分之间的间隔长达20秒，则可以在两部分之间加入一句空歌词，令前一部分最末一句的用时取5秒，这样可能可以解决逐字模拟不准确的问题。

马黑黑

格式化时间信息的函数 toMin 是预留函数，本帖示例未用上

马黑黑

本帖示例的原始lrc歌词来源于网络，除去掉头尾，其余内容几乎未做改动

红影

用搜来的歌词也能做歌词逐字同步了，这个好，小辣椒肯定会觉得很省力

马黑黑

红影 发表于 2023-2-18 18:19
用搜来的歌词也能做歌词逐字同步了，这个好，小辣椒肯定会觉得很省力

这个呢，有一个比较难处理的问题，就是每一句歌词的用时不好确定

红影

马黑黑 发表于 2023-2-18 19:34
这个呢，有一个比较难处理的问题，就是每一句歌词的用时不好确定

是的，只有开始时间，没有结束时间。对于间隔长的过门，可以用加入一句空歌词来调整，当中就只能随它去了。

马黑黑

醉美水芙蓉 发表于 2023-2-18 21:36
这个很实用！很多人喜欢简单化！

主要是不用制作歌词，不过也有缺点，比如不好确定每一句歌词演唱用时

马黑黑

红影 发表于 2023-2-18 21:12
是的，只有开始时间，没有结束时间。对于间隔长的过门，可以用加入一句空歌词来调整，当中就只能随它去了 ...

据我观察，有不少歌词有空歌词信息，它其实就是前一句歌词演唱结束时间

红影

马黑黑 发表于 2023-2-18 23:12
据我观察，有不少歌词有空歌词信息，它其实就是前一句歌词演唱结束时间

遇上这样原本就带着空歌词信息的，就更方便了。

马黑黑

红影 发表于 2023-2-19 18:49
遇上这样原本就带着空歌词信息的，就更方便了。

对。我现在纠结的是平均值的使用是否合理。@小辣椒 的新帖有两句明显偏快，这是平均值机制使然；不过对于大多数的歌曲，它是合适的。

红影

马黑黑 发表于 2023-2-19 19:15
对。我现在纠结的是平均值的使用是否合理。@小辣椒 的新帖有两句明显偏快，这是平均值机制使然；不过对于 ...

对于个别调整可以手动的啊，尤其熟悉的歌曲。可以把平均值那句修改一下的。

马黑黑

红影 发表于 2023-2-19 20:41
对于个别调整可以手动的啊，尤其熟悉的歌曲。可以把平均值那句修改一下的。

是的

小辣椒

马黑黑 发表于 2023-2-19 19:15
对。我现在纠结的是平均值的使用是否合理。@小辣椒 的新帖有两句明显偏快，这是平均值机制使然；不过对于 ...

黑黑，我也是自己对比了几个以前的歌词同步，我感觉有几句还是要自己修改一下

马黑黑

小辣椒 发表于 2023-2-20 20:52
黑黑，我也是自己对比了几个以前的歌词同步，我感觉有几句还是要自己修改一下

抒情类的歌曲尤甚