lrc maker 20220613 更新公告
主要更新：[*]修复已知个别细节问题；
[*]同步显示播放进度原始数据；
[*]自动处理歌词中的小角单引号；
[*]完善误差值机制，取值设定的上限为1秒，支持负值数值。
【附一】程序打包（主程序+手册+帖子模板 文件名 new.rar大小 6.70Kb）：
【附二】文档
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日
【附件三】歌词同步帖子模板
<style>
/*帖子外层盒子*/
.mama { position: relative; margin: auto; width: 1000px; height: 600px; background: transparent linear-gradient(to right bottom, darkgreen, snow); box-shadow: 2px 2px 2px #444; }
/*播放器外层盒子*/
.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; }
/*播放控制外层盒子*/
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
/*播放按钮*/
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
/*播放按钮鼠标滑过*/
.playbtn:hover { background: red; }
/*暂停按钮*/
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
/*暂停按钮鼠标滑过*/
.pausebtn:hover { border-color: transparent red; }
/*进度条*/
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
/*进度滑块*/
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
/*歌词面板外层盒子*/
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
/*歌词区域限制层*/
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
/*歌词ul标签*/
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
/*歌词li标签*/
.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; }
</style>
<div class="mama">
<!-- 播放器开始 -->
<div class="lrcWrap">
<p>帖子标题</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<div class="playbtn"></div>
<div class="pausebtn"></div>
<div class="meter"><span class="slider"></span></div>
</div>
<!-- 播放器结束 -->
</div>
</div>
<audio class="aud" src="音频地址" autoplay="autoplay" loop="loop"></audio>
<script>
//N多盒子句柄
let aud = document.querySelector('.aud'),
playbtn = document.querySelector('.playbtn'),
pausebtn = document.querySelector('.pausebtn'),
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //误差修正
//lrc歌词数组
let lrcAr = [
['0.00','第一句'],
['3.84','第二句'],
//...第N句
['331.05','最后一句']
];
//将歌词写入li标签
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
//监听进度
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
//监听结束事件
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
//监听暂停与播放
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
//进度条点击事件
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
//暂停与播放按钮点击事件
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
//获取进度条偏移总量
let offset = (obj,direction) => {
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
//按钮状态
let btnstate = (paused) => {
paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
//初始化按钮状态
aud.paused ? btnstate(1) : btnstate(0);
</script>
【附件四】lrc maker 在线制作程序：
<p><br><br><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=60264&extra=page%3D1">lrc歌词同步在线制作</a></p> 老黑辛苦了。有你真好！{:4_199:} “最新更新的 lrc maker 能自动处理小角引号问题，不用手动操作。”
连这样的细节都考虑到了，黑黑真棒{:4_199:} 感谢黑黑带来的福利，这种特定的歌词制作独此一家，我们太幸运了{:4_199:} “主程序+手册+帖子模板”非常完整的一套“装备”，感谢黑黑{:4_187:} 应该给这套专有的lrc maker起个什么专用名称才好。一提到就会想起的名称。有名字才更觉得亲切。
黑黑牌？秒速牌？秒刹牌？我觉得秒刹比较好，毕竟是以秒为单位的，考验手速的{:4_173:} 红影 发表于 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
不好，还是普普通通的吧，不好张扬的
咱们只在这里用的名称啊，这也不算张扬吧{:4_173:} 马黑黑 发表于 2022-6-13 19:14
其实一开始就能想到这个问题的，毕竟这是绕不过去的，只是精力暂时不放在这样的细节上
嗯，这样的情况毕竟遇到不多，若是纯中文的歌曲的话。 马黑黑 发表于 2022-6-13 19:14
开心就好
已经下载了，包括单位电脑也下载了呢。 马黑黑 发表于 2022-6-13 19:15
嗯，有针对性，更是原生的特制的
特别自豪特别荣幸的感觉{:4_199:} 收到~~谢谢黑黑{:4_187:}