lrc歌词在线制作正式版
本帖最后由 马黑黑 于 2022-6-13 13:04 编辑 <br /><br /><style>.outer { margin: auto; width: fit-content; height: fit-content; }
.outer h2 { margin: 10px; padding: 0; font: bold 1.5em sans-serif; text-align: center; }
.outer p { margin: 10px; }
.outer input { font: normal 16px sans-serif; }
#slip { width: 50px; text-align: center; }
#lrcText { padding: 10px; width: 620px; height: 400px; font: normal 16px sans-serif; resize: both; }
#mUrl { padding: 4px; width: 446px; }
#up { display: none; }
#aud { display: none; outline: none; }
#audMsg { display: inline-block; margin-left: 12px; height: 54px; font: normal 1em / 54px sans-serif; }
</style>
<div class="outer">
<h2>lrc maker for Huachao</h2>
<p><textarea id="lrcText" rows ="18" cols="60" placeholder="原始歌词"></textarea></p>
<p>
<input id="begin" type="button" value=" 开始 " />
<input id="up" type="button" value=" ↑↑ " />
<input id="mUrl" type="text" placeholder="音频地址" value="" />
<label>误差值 : </label>
<input id="slip" type="number" placeholder="0" value="0.2" min="0" max="1" step="0.1" />
</p>
<p style="display:flex">
<audio id="aud" src="胡广生.mp3" controls="controls"></audio>
<span id="audMsg"></span>
</p>
</div>
<p>最新更新：2022年6月13日<br><br>打包下载: <a href="https://www.huachaowang.com/thread-60382-1-1.html">2022.6.13</a></p>
<script>
let begin = document.querySelector('#begin'),
reset = document.querySelector('#reset'),
up = document.querySelector('#up'),
lrcText = document.querySelector('#lrcText'),
slip = document.querySelector('#slip'),
audMsg = document.querySelector('#audMsg'),
mUrl = document.querySelector('#mUrl');
let lrcArr = [], idx = 0, slipNum = 0.2; //lrc歌词数组、数组元素标识、误差值
begin.onclick = function() {
if(lrcText.value == '' || mUrl.value == '') return false;
lrcArr.length = 0;
lrcArr = lrcText.value.split('\n');
aud.src = mUrl.value;
lrcText.value = 'let lrcAr = [\n';
mUrl.value = lrcArr;
this.style.display = 'none';
up.style.display = 'inline-block';
aud.style.display = 'inline-block';
}
up.onclick = function() {
if(idx == lrcArr.length - 1) {//最后一句
lrcText.value += '\t' + mUrl.value.slice(0,-1) + '\n];';
this.disabled = true;
} else {
lrcText.value += '\t' + mUrl.value + '\n';
}
lrcText.scrollTop = lrcText.scrollHeight; //同步翻滚
if(idx<lrcArr.length - 1) idx ++;
mUrl.value = idx == lrcArr.length - 1 ? '' : lrcArr;
}
slip.onchange = function() {
slipNum = slip.value;
if(slipNum > 1) slipNum = 1;
if(slipNum < -1) slipNum = -1;
console.log(slipNum);
}
aud.addEventListener('pause',function(){
let time = (aud.currentTime - slipNum).toFixed(2);
mUrl.value = `['${time}','${rep(lrcArr)}'],`;
})
aud.addEventListener('timeupdate',function(){
audMsg.innerText = '播放进度 : ' + aud.currentTime;
})
function rep(str) { return str.replace(/\'/g,"\\\'"); }
</script> 本帖最后由 马黑黑 于 2022-6-7 20:35 编辑
程序打包（程序+帖子模板+手册 共5Kb）： 本帖最后由 马黑黑 于 2022-6-7 20:36 编辑
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
本帖最后由 马黑黑 于 2022-6-7 20:37 编辑
歌词同步帖子模板代码：<style>
.mama { margin: auto; width: 800px; height: 560px; background: #eee; box-shadow: 2px 2px 2px #333; position: relative; }
#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; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; user-select: none;}
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#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; }
.meter { position: absolute; top: 40px; width: 100px; transform: translate(-60px, -2px) rotate(-90deg); cursor: pointer; }
</style>
<div class="mama">
<div class="stone"></div>
<div id="lrcDiv_outer">
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
</div>
<audio class="aud" src="胡广生.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr = [
['0.01','歌词一'],
['5.39','歌词二'],
//...
['400.78','歌词N']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
meter.value = prog;
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})
lrcUl.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
醉美水芙蓉 发表于 2022-6-7 20:31
老师速度这么快！
喝完酒速度就是快（错误也多）{:4_170:} 黑黑，刚才看见红影做的就是这个模板出来的？ 收藏了，黑黑的宝藏真多{:4_178:} 小辣椒 发表于 2022-6-7 21:30
黑黑，刚才看见红影做的就是这个模板出来的？
是啊，我就是用这个做的LRC歌词，然后放进帖子里的{:4_173:} 越弄越完美了，黑黑辛苦了{:4_187:} 红影 发表于 2022-6-7 21:44
是啊，我就是用这个做的LRC歌词，然后放进帖子里的
太好了，昨天晚上我突然歌词编辑器坏了，求救黑黑，没有想到，今天黑黑这个出来了，亲爱的你也是速度的，我都没有看见你就做出来了{:4_178:} 小辣椒 发表于 2022-6-7 21:46
太好了，昨天晚上我突然歌词编辑器坏了，求救黑黑，没有想到，今天黑黑这个出来了，亲爱的你也是速度的， ...
觉得这个特别好，就马上去使用它的功能了呀{:4_173:} 这个在线的挺好的。我已经下载了。明天来制作一个看效果。{:5_154:} 这个的好在于能对在线歌曲制作LRC，我以前有个软件，只能对本地歌曲可以的，害得我为了做歌词只能下载歌曲。这个是本地歌曲在线歌曲都可以，太厉害了{:4_199:} 红影 发表于 2022-6-7 21:48
觉得这个特别好，就马上去使用它的功能了呀
这个确实不错，知道我昨天急的，有这个就不用今天找人了，昨天半夜都在找岁月，结果下载了几个都不行 红影 发表于 2022-6-7 21:49
这个的好在于能对在线歌曲制作LRC，我以前有个软件，只能对本地歌曲可以的，害得我为了做歌词只能下载歌曲 ...
就是功能单一了点，没有加入可能的误差处理机制 小辣椒 发表于 2022-6-7 21:30
黑黑，刚才看见红影做的就是这个模板出来的？
预览版的那个做出来的 小辣椒 发表于 2022-6-7 21:42
收藏了，黑黑的宝藏真多
刚挖到的{:5_117:} 马黑黑 发表于 2022-6-7 22:25
刚挖到的
我挖到就收藏，就是我的宝了啊{:4_170:} 红影 发表于 2022-6-7 21:46
越弄越完美了，黑黑辛苦了
这个，大文本框会同步翻滚，还可以手动调节宽高，制作出了的结果直接是数组形式的