lrc歌词在线制作（预览）
<style>.outer { margin: auto; width: fit-content; height: fit-content; font: normal 16px sans-serif; }
#lrcText { padding: 8px; width: 500px; height: 400px;}
#mUrl { padding: 4px; width: 450px; }
#up { display: none; }
#aud { display: none; outline: none; }
</style>
<div class="outer">
<p><textarea id="lrcText" rows ="18" cols="60" placeholder="粘贴原始歌词到此处"></textarea></p>
<p><br>
<input id="begin" type="button" value=" 开始 " />
<input id="up" type="button" value=" ↑↑ " />
<input id="mUrl" type="text" placeholder="音频地址" value="" />
</p>
<p><br><audio id="aud" controls="controls"></audio></p>
</div>
<script>
let begin = document.querySelector('#begin'),
reset = document.querySelector('#reset'),
up = document.querySelector('#up'),
lrcText = document.querySelector('#lrcText'),
mUrl = document.querySelector('#mUrl');
let lrcArr = [];
let idx = 0;
begin.onclick = function() {
if(lrcText.value == '' || mUrl.value == '') return false;
lrcArr.length = 0;
lrcArr = lrcText.value.split('\n');
aud.src = mUrl.value;
lrcText.value = '';
mUrl.value = lrcArr;
this.style.display = 'none';
up.style.display = 'inline-block';
aud.style.display = 'block';
}
up.onclick = function() {
lrcText.value += mUrl.value + '\n';
if(idx<lrcArr.length - 1) idx ++;
mUrl.value = lrcArr;
}
aud.addEventListener('pause',function(){
let time = aud.currentTime.toFixed(2);
mUrl.value = `['${time}','${lrcArr}'],`;
})
</script>
本帖最后由 马黑黑 于 2022-6-7 13:35 编辑
使用方法：
步骤一：
将原是歌词按诗歌的格式复制到大文本框中，再将有效的音频地址复制到小文本框中，然后点击“开始”按钮。
步骤二：
“开始”按钮点击后，大本文框被清空，用于装载随后制作的lrc歌词；小文本框出现歌词的第一句；开始按钮变为向上的双箭头的按钮。并且，下方还出现了播放器。
程序通过手动控制播放器的 播放/暂停 来获取显示在小文本框里的歌词的lrc时间信息。先点击播放器上的播放，再点击暂停，lrc的消息就会替换掉小文本框里的文本，查看无误，则点击双向上箭头按钮，lrc歌词将会加入到大文本框中去，逐句操作，直到所有歌词弄好为止。
获取时间不够准确之时，可以手动修改小文本框里的时间，也可以通过播放器的滑动杆倒回相应距离再播放然后暂停来重新获取当前句的时间信息。
所有歌词弄好后，大本文框里的文本，就是帖子所要的lrc歌词的数组内容，删除最后一句末尾的逗号，就可以复制到帖子的lrc歌词变量里。
lrc歌词帖子代码我附在下一楼。这个程序生成的歌词不适合以前的歌词同步模板，只能用下楼的模板。
本帖最后由 马黑黑 于 2022-6-7 13:36 编辑
歌词同步帖子模板：
<style>
.mama { margin: auto; width: 1200px; height: 900px; background: #eee; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: -30px; top: 58px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
#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; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
#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; }
</style>
<div class="mama">
<div class="stone"></div>
<div id="lrcDiv_outer">
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</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.18','作词 : 任素汐'],
['4.04','作曲 : 任素汐'],
['5.73','胡广生 - 师葭希、韩甜甜/小石头和孩子们'],
['7.35','演唱：师葭希/韩甜甜'],
['9.26','声乐老师/和声编写：石栋颖'],
['11.65','录音师/缩混：石栋颖'],
['15.21','录音棚：小石头音乐录音棚'],
['16.29','小石头和孩子们 出品'],
['23.50','师葭希：一个乌的黑团团'],
['26.06','高高哩 哑哑哩'],
['28.82','两个魂喘着粗气'],
['31.59','烟尘四起'],
['34.44','你认得我吗'],
['36.82','跟我说那么多句'],
['40.14','你要哩尊严'],
['42.36','我熟悉'],
['46.05','韩甜甜：桥上走的哪一句'],
['48.82','我没到 你别起韵'],
['51.78','你就把头转过去'],
['54.59','莫给我消息'],
['57.17','我欠你啥子嘛'],
['60.22','我啥子都不欠你的'],
['63.15','你问我真哩迈 真哩'],
['68.89','师葭希、韩甜甜：走走停停不如定定'],
['74.52','凄凄切切说句谢谢'],
['80.22','等等 不必等等'],
['86.20','等等 别等等'],
['114.71','韩甜甜：桥上走的哪一句'],
['117.39','我没到 你别起韵'],
['120.27','你就把头转过去'],
['123.12','莫给我消息'],
['125.99','师葭希：我欠你啥子嘛'],
['128.65','我啥子都不欠你的'],
['131.53','你问我真哩迈 真哩'],
['137.54','师葭希、韩甜甜：走走停停不如定定'],
['143.16','凄凄切切说句谢谢'],
['148.85','等等 不必等等'],
['154.78','等等 别等等'],
['160.44','等等 不必等等'],
['166.06','等等 别等等'],
['172.11','啊。。。'],
['194.16','师葭希：下个清明 我去音书祭你'],
['201.44','还听 还静'],
['209.51','lrc整理 Mark']
];
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;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2022-6-7 18:14 编辑
正式版预计今天21:00之前推出 这个太牛了，可以一句句制作自己的lrc了，而且是很特别的能直接用在黑黑歌词同步代码里的lrc歌词，简直太惊艳了。给黑黑点无数个赞{:4_199:} 这个用来做网易云的歌曲太方便了，那里有歌曲地址还有歌词。直接复制就能得到lrc歌词，太完美了{:4_199:} 黑黑真是无所不能，太厉害了{:4_205:} 如果手一抽抽按错了，还可以拉进度条到前面，重来，到正确位置再按。这个真的太好了{:4_199:}
到网易云随手找了个歌曲，加个头加个尾，制作如下：
['0.20','《人间烟火》-程响'],
['12.10','学习黑黑歌词制作'],
['24.11','一人后来过江南 烟雨锁惆怅'],
['31.87','听得乌篷轻摇桨 竟不知所想'],
['39.54','画船萧鼓声声唱 几曲断人肠'],
['47.29','谁家墙头有梅 自芬芳'],
['55.20','人间一场烟火 你曾盛开过'],
['62.80','刻几人在心窝 从此孤独活'],
['70.58','江南花已凋落 怎堪再斟酌'],
['78.32','可怜良辰无多 竟似无人说'],
['101.56','你撑纸伞回头望 千年乌衣巷'],
['109.33','问君青丝有几丈 能把风月量'],
['116.97','谁言杯酒醉他乡 红尘皆可忘'],
['124.75','凭栏数尽孤帆 泪两行'],
['132.56','人间一场烟火 你曾盛开过'],
['140.24','刻几人在心窝 从此孤独活'],
['147.98','江南花已凋落 怎堪再斟酌'],
['155.67','可怜良辰无多 竟似无人说'],
['163.45','人间一场烟火 你曾盛开过'],
['171.19','刻几人在心窝 从此孤独活'],
['178.98','江南花已凋落 怎堪再斟酌'],
['186.68','可怜良辰无多 竟似无人说'],
['194.35','可怜良辰无多 竟似无人说'],
['202.15','可怜良辰无多 再难与人说'],
['212.39','制作红影 2022.6.7'] 马上开饭了，一会吃完，来用这个新制作的歌词做个帖子试试效果{:4_173:} 本帖最后由 闲言不语 于 2022-6-7 18:07 编辑 <br /><br />厉害了马黑黑{:4_199:} 红影 发表于 2022-6-7 17:40
这个太牛了，可以一句句制作自己的lrc了，而且是很特别的能直接用在黑黑歌词同步代码里的lrc歌词，简直太惊 ...
这个是预览的版本，还有做些简单的完善工作的，有空再说 红影 发表于 2022-6-7 17:42
这个用来做网易云的歌曲太方便了，那里有歌曲地址还有歌词。直接复制就能得到lrc歌词，太完美了
真会讨巧{:4_170:} 闲言不语 发表于 2022-6-7 18:06
本帖最后由 闲言不语 于 2022-6-7 18:07 编辑 厉害了马黑黑
一般一般班里倒数第三 红影 发表于 2022-6-7 17:44
黑黑真是无所不能，太厉害了
哪能无所不能，一般般的 红影 发表于 2022-6-7 17:53
马上开饭了，一会吃完，来用这个新制作的歌词做个帖子试试效果
期待中 马黑黑 发表于 2022-6-7 18:12
这个是预览的版本，还有做些简单的完善工作的，有空再说
这个真的太好了，黑黑太棒了。我把代码留在本地了，以后可以随心做LRC了{:4_187:} 马黑黑 发表于 2022-6-7 18:12
真会讨巧
现在做歌词同步方便多了{:4_199:} 马黑黑 发表于 2022-6-7 18:17
期待中
吃完晚饭跑去做核酸，排队排了好半天。已经发出来了，感觉歌词出来有点滞后。 红影 发表于 2022-6-7 21:14
吃完晚饭跑去做核酸，排队排了好半天。已经发出来了，感觉歌词出来有点滞后。
估计会有点手慢，当句歌词第一个唱到时按下就好，早一点点更好