lrc maker 20220613 更新公告

马黑黑

主要更新：

• 修复已知个别细节问题；
• 同步显示播放进度原始数据；
• 自动处理歌词中的小角单引号；
• 完善误差值机制，取值设定的上限为1秒，支持负值数值。
  

【附一】程序打包（主程序+手册+帖子模板 文件名 new.rar  大小 6.70Kb）： new.rar (6.7 KB, 下载次数: 4)

2022-6-13 13:00 上传

点击文件名下载附件

【附二】文档

lrcMaker使用手册

lrcMarker是一款用JavaScript开发的lrc歌词制作辅助程序。所制作的lrc歌词以JS数组形式存在，适用于特定歌词同步帖子模板（详见附件 歌词同步模板.htm）。

每一个访问周期可以制作一支曲子的lrc歌词，制作下一支歌曲lrc歌词，请重新访问或刷新此程序所在页面。

一、准备工作

使用者需要事先准备好歌曲的歌词和歌曲地址URL。歌词建议一行一句，确保前后和中间都没有空行，如有粘贴后可以在大文本框中将其删除；歌曲URL必须真实有效，确保能正常播放。然后分别将歌词和歌曲URL复制到大文本框和小文本框，一切就绪后，单击“开始”按钮，进入下一个操作步骤。

如果在本地运行 lrcMaker 程序，音频地址可以是程序所在目录或其子目录下的文件，例如 123.mp3 或 music/123.mp3 之类的真实文件地址。相同磁盘下的并行目录的音频资源也可以使用，地址写成 ../music/123.mp3 即可，目录关系通过 ../ 表示，../ 表示后退一层目录的意思，后退多少层就用多少个，例如后退两层，写为 ../../music/123.mp3。

二、开始制作

当点击过“开始”按钮，如果准备工作正常，则“开始”按钮消失，取而代之的按钮是一个向上的双箭头（下称箭头按钮），它的作用是将加入了时间信息的单句歌词追加到大文本框，但不要急着去点击它，请先了解一下制作lrc工作状态下的程序界面：

大文本框的文本发生了变化，以下语句

“let lrcAr = [”

是将来歌词同步帖子需要的数组起头部分；

小文本框出现了歌词首句，但还没有时间信息；

小文本框右边一开始就存在一个更小的数字文本框，它是误差值设定，从 0 到 1秒的幅度，默认值为 0.2，可以随时修改，但建议保持前后一致，并确保输入的是规定内的数字。更多的误差值内容请阅读本文后面“其他说明”；

丑陋异常的 audio 播放器（下称丑哥或丑哥播放器）出现在了底部，它是 lrc 歌词制作的主要角色，是位英雄。

单击丑哥的播放按钮，开始播放音乐，当音乐唱到小文本框的第一个字时立马点击丑哥的暂停按钮，这时，小文本框的单句歌词出现了时间信息，而且整个小文本框的文本是数组格式的，这很重要，请始终保护好该格式。此时，单击箭头按钮，小文本框的文本追加到大文本框，同时小文本框换上了下一句歌词内容，同样通过对播放器丑哥的手动播放、暂停来完善该句歌词的lrc歌词信息。注意，播放器的手动暂停是小文本框歌词得以完善之时，在暂停间隙可以从容操作，通过点击箭头按钮让当前lrc歌词追加到大文本框中去；小文本框的文本还没有出现合法数组格式时不要去点击它。

操作中会有手慢或手快的情况，此时不要慌张，可以手动修改小文本框里的时间信息，也可以通过丑哥播放器的回倒再播放、暂停的功能重新获取当前小文本框里的歌词的时间信息；“上屏”后的lrc歌词信息也同样可以修改，修改时请保护好数组数据的格式。

lrc歌词“上屏”意味着当前操作的第N句歌词的 idx 变量发生变化，所以“上屏”前请珍惜该次操作。当然，后悔药总是有的，那就是对大文本框进行修改操作。

一切正常的话，到最后一句歌词，程序会正确处理最后一句歌词的数据结构，同时会另起一行给出lrc歌词数组的收尾字符，“];”。如果本行所说的内容没有发生（意外总会存在），应手动修改数据，确保大文本框中的内容是如下酱紫的漂亮结构：

let lrcAr = [
        ['1.87','第一句歌词'],
        ['5.39','第二句歌词'],
        // ....
        ['305.59','最后一句歌词']
];

最后，将大文本框的内容整体复制出来，放到帖子中的JS代码中的相应的位置即可大功告成。若此，你应当得到一份美好的祝福。

三、其他说明

① lrc歌词的时间信息为何不使用“分+秒”结构？

我知道“分+秒”结构的时间信息更为直观，易于在制作lrc歌词时观照比对，但是考虑到 audio 丑哥的 currentTime、duration 等在JS中的时间相关信息是“秒+毫秒”结构，我数学不好不想转来转去:0。嗯，好吧，主要是“秒+毫秒”的时间格式是丑哥为JS提供的原生数据，用于歌词同步时似乎更好，不用做任何转换，直接使用。

② 误操作将没有lrc时间信息的歌词上屏了怎么办？

好办，按 ['时间','歌词'], 这样的格式在大文本框修改该句歌词，倒回相应进度播放，关键时刻按丑哥的暂停键，在小文本框会出现正确的时间，将该时间信息替换掉大文本框对应句的时间，然后按常规流程接着制作下一句（下一句现在已经在小文本框里，它的时间信息要重新获取）。

③ 制作过程中大文本框的格式乱了怎样处理？

大文本框总是将追加的信息放在最后一行，正常操作情况下不会出现格式混乱的情况。人为造成的混乱格式可以手动修正，修正工作结束前请确保最后一行结束时有一个换行（就一个哈，多了请删掉），后续的制作就不会再有问题。

④ 歌词中有小角单、双引号正常吗？如果不正常如何处理？

根据 lrcAr 数组结构，小角双引号没问题，小角单引号不合法。小角单引号一般出现在外文歌词，如英文的 I'm、it's、they're 等单词合并缩写形式，处理方法是给单引号加上反斜杠（\）：I\'m，it\'s，they\'re 。

最新更新的 lrc maker 能自动处理小角引号问题，不用手动操作。

⑤ 误差值设置有什么规定？

程序主要为手慢者设定误差值，合法值在0~1之间，但手动输入可以突破这个范围，单这是表面的，程序对误差值有保护机制。合法的误差值举例如下：

0，0.1，.1，0.26，.26，1

程序并不歧视手快者，可以输入负值来纠正手快造成的误差，合法的数值举例如下：

-0，-0.1，-.1，-0.26，-.26，-1

误差值设定操作后，从当前句开始生效，按下丑哥播放器的暂停按钮，程序以刚刚设定的数值处理误差，可以通过比对程序提供的播放进度数值来感受误差值设定的变化（结果值小数点后第二位数四舍五入）。

不合法的误差数值均会被修正，当输入的是非数值时，程序认可误差值为 0。



马黑 2022年6月7日 | 补充、修改时间：6月13日

马黑黑

【附件三】歌词同步帖子模板

1. 
   
2. <style>
   
3. /*帖子外层盒子*/
   
4. .mama { position: relative; margin: auto; width: 1000px; height: 600px; background: transparent linear-gradient(to right bottom, darkgreen, snow); box-shadow: 2px 2px 2px #444; }
   
5. /*播放器外层盒子*/
   
6. .lrcWrap { position: absolute; top: 10px; left: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
   
7. /*播放控制外层盒子*/
   
8. .meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
   
9. /*播放按钮*/
   
10. .playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
    
11. /*播放按钮鼠标滑过*/
    
12. .playbtn:hover { background: red; }
    
13. /*暂停按钮*/
    
14. .pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
    
15. /*暂停按钮鼠标滑过*/
    
16. .pausebtn:hover { border-color: transparent red; }
    
17. /*进度条*/
    
18. .meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
    
19. /*进度滑块*/
    
20. .slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
    
21. /*歌词面板外层盒子*/
    
22. .lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
    
23. /*歌词区域限制层*/
    
24. .lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
    
25. /*歌词ul标签*/
    
26. .lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
    
27. /*歌词li标签*/
    
28. .lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
    
29. </style>
    
30. 
    
31. <div class="mama">
    
32.         <!-- 播放器开始 -->
    
33.         <div class="lrcWrap">
    
34.                 <p>帖子标题</p>
    
35.                 <div class="lrcBox"><ul class="lrcUl"></ul></div>
    
36.                 <div class="meterWrap">
    
37.                         <div class="playbtn"></div>
    
38.                         <div class="pausebtn"></div>
    
39.                         <div class="meter"><span class="slider"></span></div>
    
40.                 </div>
    
41.         <!-- 播放器结束 -->
    
42.         </div>
    
43. </div>
    
44. <audio class="aud" src="音频地址" autoplay="autoplay" loop="loop"></audio>
    
45. 
    
46. <script>
    
47. //N多盒子句柄
    
48. let aud = document.querySelector('.aud'),
    
49.         playbtn = document.querySelector('.playbtn'),
    
50.         pausebtn = document.querySelector('.pausebtn'),
    
51.         meter = document.querySelector('.meter'),
    
52.         slider = document.querySelector('.slider'),
    
53.         lrcUl = document.querySelector('.lrcUl');
    
54. let slip = 0; //误差修正
    
55. //lrc歌词数组
    
56. let lrcAr = [
    
57.         ['0.00','第一句'],
    
58.         ['3.84','第二句'],
    
59.         //...第N句
    
60.         ['331.05','最后一句']
    
61. ];
    
62. //将歌词写入li标签
    
63. for(j=0; j<lrcAr.length; j++){
    
64.         lrcUl.innerHTML += '<li id="li' + lrcAr[j][0] + '" style="list-style-type: none">' + lrcAr[j][1] + '</li>';
    
65. }
    
66. //监听进度
    
67. aud.addEventListener('timeupdate', () => {
    
68.         let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
    
69.         slider.style.transform = 'translate(' + prog + 'px)';
    
70.         let tt = aud.currentTime;
    
71.         for(j=0; j<lrcAr.length; j++){
    
72.                 if(tt >= lrcAr[j][0] - slip){
    
73.                         if(j > 0){
    
74.                                 let idxLast = lrcAr[j-1][0];
    
75.                                 document.getElementById('li' + idxLast).style.color = 'gray';
    
76.                                 lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
    
77.                         }
    
78.                         let idx = lrcAr[j][0];
    
79.                         document.getElementById('li' + idx).style.color = 'ghostwhite';
    
80.                 }
    
81.         }
    
82. })
    
83. //监听结束事件
    
84. aud.addEventListener('ended', () => {
    
85.         document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = 'gray';
    
86.         lrcUl.style.top = 0;
    
87. })
    
88. //监听暂停与播放
    
89. aud.addEventListener('pause', () => btnstate(1));
    
90. aud.addEventListener('play',() => btnstate(0));
    
91. //进度条点击事件
    
92. meter.onclick = (e) => {
    
93.         e = e || event;
    
94.         aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
    
95. }
    
96. //暂停与播放按钮点击事件
    
97. pausebtn.onclick = () => { aud.pause(); btnstate(1); }
    
98. playbtn.onclick = () => { aud.play(); btnstate(0); }
    
99. //获取进度条偏移总量
    
100. let offset = (obj,direction) => {
     
101.         let offsetDir = "offset" + direction[0].toUpperCase() + direction.substring(1);
     
102.         let realNum = obj[offsetDir];
     
103.         let positionParent = obj.offsetParent;
     
104.         while(positionParent != null){
     
105.                 realNum += positionParent[offsetDir];
     
106.                 positionParent = positionParent.offsetParent;
     
107.         }
     
108.         return realNum;
     
109. }
     
110. //按钮状态
     
111. let btnstate = (paused) => {
     
112.         paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
     
113. }
     
114. //初始化按钮状态
     
115. aud.paused ? btnstate(1) : btnstate(0);
     
116. 
     
117. </script>

复制代码

马黑黑

【附件四】lrc maker 在线制作程序：

lrc歌词同步在线制作

加林森

老黑辛苦了。有你真好！

红影

“最新更新的 lrc maker 能自动处理小角引号问题，不用手动操作。”

连这样的细节都考虑到了，黑黑真棒

红影

感谢黑黑带来的福利，这种特定的歌词制作独此一家，我们太幸运了

红影

“主程序+手册+帖子模板”非常完整的一套“装备”，感谢黑黑

红影

应该给这套专有的lrc maker起个什么专用名称才好。一提到就会想起的名称。有名字才更觉得亲切。
黑黑牌？秒速牌？秒刹牌？我觉得秒刹比较好，毕竟是以秒为单位的，考验手速的

马黑黑

红影 发表于 2022-6-13 14:34
应该给这套专有的lrc maker起个什么专用名称才好。一提到就会想起的名称。有名字才更觉得亲切。
黑黑牌？ ...

不好，还是普普通通的吧，不好张扬的

马黑黑

加林森 发表于 2022-6-13 13:25
老黑辛苦了。有你真好！

有谁都好的

马黑黑

红影 发表于 2022-6-13 14:12
“最新更新的 lrc maker 能自动处理小角引号问题，不用手动操作。”

连这样的细节都考虑到了，黑黑真棒{ ...

其实一开始就能想到这个问题的，毕竟这是绕不过去的，只是精力暂时不放在这样的细节上

马黑黑

红影 发表于 2022-6-13 14:21
“主程序+手册+帖子模板”非常完整的一套“装备”，感谢黑黑

开心就好

马黑黑

红影 发表于 2022-6-13 14:14
感谢黑黑带来的福利，这种特定的歌词制作独此一家，我们太幸运了

嗯，有针对性，更是原生的特制的

加林森

马黑黑 发表于 2022-6-13 19:12
有谁都好的

有你才好。我已经下载了。我送小辣椒的就是用你最新的在线制作的。感觉相当好用。

红影

马黑黑 发表于 2022-6-13 19:12
不好，还是普普通通的吧，不好张扬的

咱们只在这里用的名称啊，这也不算张扬吧

红影

马黑黑 发表于 2022-6-13 19:14
其实一开始就能想到这个问题的，毕竟这是绕不过去的，只是精力暂时不放在这样的细节上

嗯，这样的情况毕竟遇到不多，若是纯中文的歌曲的话。

红影

马黑黑 发表于 2022-6-13 19:14
开心就好

已经下载了，包括单位电脑也下载了呢。

红影

马黑黑 发表于 2022-6-13 19:15
嗯，有针对性，更是原生的特制的

特别自豪特别荣幸的感觉

小辣椒

收到~~谢谢黑黑