lrc歌词在线制作正式版

马黑黑

lrc maker for Huachao

误差值 :

最新更新：2022年6月13日

打包下载: 2022.6.13

马黑黑

程序打包（程序+帖子模板+手册 共5Kb）： lrcmaker.rar (4.28 KB, 下载次数: 10)

2022-6-7 20:35 上传

点击文件名下载附件

马黑黑

lrcMaker使用手册

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

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

一、准备工作

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

如果在本地运行 lrcMaker 程序，音频地址可以是程序所在目录或其子目录下的文件，例如 123.mp3 或 music/123.mp3 之类的真实文件地址。

二、开始制作

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

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

“let lrcAr = [”

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

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

丑陋异常的 audio 播放器出现在了底部，它是 lrc 歌词制作的主要角色。

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

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

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

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

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

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

三、其他说明

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

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

② 没想好

马黑 2022年6月7日于lx

马黑黑

歌词同步帖子模板代码：

1. <style>
   
2. .mama { margin: auto; width: 800px; height: 560px; background: #eee; box-shadow: 2px 2px 2px #333; position: relative; }
   
3. #lrcDiv_outer { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; cursor: pointer; }
   
4. #lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; user-select: none;}
   
5. #lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
   
6. #lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
   
7. .meter { position: absolute; top: 40px; width: 100px; transform: translate(-60px, -2px) rotate(-90deg); cursor: pointer; }
   
8. </style>
   
9. 
   
10. <div class="mama">
    
11.         <div class="stone"></div>
    
12.         <div id="lrcDiv_outer">
    
13.                 <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
    
14.                 <div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
    
15.         </div>
    
16. </div>
    
17. <audio class="aud" src="胡广生.mp3" autoplay="autoplay" loop="loop"></audio>
    
18. 
    
19. <script>
    
20. let aud = document.querySelector('.aud'),
    
21.         meter = document.querySelector('.meter'),
    
22.         lrcUl = document.getElementById('lrcUl');
    
23. 
    
24. let lrcAr = [
    
25.         ['0.01','歌词一'],
    
26.         ['5.39','歌词二'],
    
27.         //...
    
28.         ['400.78','歌词N']
    
29. ];
    
30. 
    
31. for(j=0; j<lrcAr.length; j++){
    
32.         lrcUl.innerHTML += '<li id="li' + lrcAr[j][0] + '">' + lrcAr[j][1] + '</li>';
    
33. }
    
34. aud.addEventListener('timeupdate', () => {
    
35.         let prog = 100 * aud.currentTime / aud.duration;
    
36.         meter.value = prog;
    
37.         let tt = aud.currentTime;
    
38.         for(j=0; j<lrcAr.length; j++){
    
39.                 if(tt > lrcAr[j][0]){
    
40.                         if(j > 0){
    
41.                                 let idxLast = lrcAr[j-1][0];
    
42.                                 document.getElementById('li' + idxLast).style.color = 'lightgreen';
    
43.                                 lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
    
44.                         }
    
45.                         let idx = lrcAr[j][0];
    
46.                         document.getElementById('li' + idx).style.color = 'gold';
    
47.                 }
    
48.         }
    
49. })
    
50. 
    
51. aud.addEventListener('ended', () => {
    
52.         document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = 'lightgreen';
    
53.         lrcUl.style.top = 0;
    
54. })
    
55. 
    
56. lrcUl.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
    
57. </script>

复制代码

马黑黑

醉美水芙蓉 发表于 2022-6-7 20:31
老师速度这么快！

喝完酒速度就是快（错误也多）

小辣椒

黑黑，刚才看见红影做的就是这个模板出来的？

小辣椒

收藏了，黑黑的宝藏真多

红影

小辣椒 发表于 2022-6-7 21:30
黑黑，刚才看见红影做的就是这个模板出来的？

是啊，我就是用这个做的LRC歌词，然后放进帖子里的

红影

越弄越完美了，黑黑辛苦了

小辣椒

红影 发表于 2022-6-7 21:44
是啊，我就是用这个做的LRC歌词，然后放进帖子里的

太好了，昨天晚上我突然歌词编辑器坏了，求救黑黑，没有想到，今天黑黑这个出来了，亲爱的你也是速度的，我都没有看见你就做出来了

红影

小辣椒 发表于 2022-6-7 21:46
太好了，昨天晚上我突然歌词编辑器坏了，求救黑黑，没有想到，今天黑黑这个出来了，亲爱的你也是速度的， ...

觉得这个特别好，就马上去使用它的功能了呀

加林森

这个在线的挺好的。我已经下载了。明天来制作一个看效果。

红影

这个的好在于能对在线歌曲制作LRC，我以前有个软件，只能对本地歌曲可以的，害得我为了做歌词只能下载歌曲。这个是本地歌曲在线歌曲都可以，太厉害了

小辣椒

红影 发表于 2022-6-7 21:48
觉得这个特别好，就马上去使用它的功能了呀

这个确实不错，知道我昨天急的，有这个就不用今天找人了，昨天半夜都在找岁月，结果下载了几个都不行

马黑黑

红影 发表于 2022-6-7 21:49
这个的好在于能对在线歌曲制作LRC，我以前有个软件，只能对本地歌曲可以的，害得我为了做歌词只能下载歌曲 ...

就是功能单一了点，没有加入可能的误差处理机制

马黑黑

小辣椒 发表于 2022-6-7 21:30
黑黑，刚才看见红影做的就是这个模板出来的？

预览版的那个做出来的

马黑黑

小辣椒 发表于 2022-6-7 21:42
收藏了，黑黑的宝藏真多

刚挖到的

小辣椒

马黑黑 发表于 2022-6-7 22:25
刚挖到的

我挖到就收藏，就是我的宝了啊

马黑黑

红影 发表于 2022-6-7 21:46
越弄越完美了，黑黑辛苦了

这个，大文本框会同步翻滚，还可以手动调节宽高，制作出了的结果直接是数组形式的