花潮lrc歌词加餐微调版（预览）
<style>#mama { margin: auto; width: fit-content; height: fit-content;}
#mama p { margin: 6px 0; padding: 0; }
#mama input { margin: 4px; outline: none; cursor: pointer; }
#mama h5 { margin: 16px 0; padding: 0; font: bold 1.4em sans-serif; text-align: center; }
#lrcText { padding: 10px; width: 640px; height: 400px; font: normal 16px / 26px sans-serif; resize: both; border: 1px solid; outline: none; }
#mUrl { padding: 4px; width: 446px; font-size: 14px; outline: none; border: 1px solid; }
#aud { outline: none; width: 500px; display: inline-block; }
#audMsg { display: none; margin-left: 12px; height: 54px; font: normal 1em / 54px sans-serif; }
</style>
</head>
<body>
<div id="mama">
<h5>花潮lrc加餐转换</h5>
<textarea rows="18" cols="60" id="lrcText" placeholder="请完整粘贴 lrcAr 歌词数组"></textarea>
<p>
<input id="up" type="button" value=" ↑↑ " disabled="disabled" />
<input id="mUrl" type="text" placeholder="音频地址" />
<input type="button" value=" 加餐 " id="btnGap" />
<input type="button" value=" 校对 " id="btnProof" style="display: none" />
<input type="checkbox" id="chkProof" />微调
</p>
<p style="display: flex">
<audio id="aud"></audio>
<span id="audMsg">0.00 | 0.00</span>
</p>
</div>
<script>
let mKey = 0, yp;
chkProof.onchange = () => {
if(chkProof.checked) {
btnGap.style.display = 'none';
btnGap.disabled = true;
btnProof.disabled = false;
btnProof.style.display = 'inline-block';
aud.controls = true;
audMsg.style.display = 'inline-block';
} else {
btnGap.style.display = 'inline-block';
btnGap.disabled = false;
btnProof.disabled = true;
btnProof.style.display = 'none';
aud.controls = false;
audMsg.style.display = 'none';
}
}
mUrl.onchange = () => {
getUrl(mUrl.value);
}
//加餐按钮点击 ：转lrc歌词为逐字同步模式
btnGap.onclick = () => {
getAr(lrcText.value);
for(key in lrcAr) {
let gap = parseInt(key) === lrcAr.length - 1 ? 6 : (lrcAr - lrcAr).toFixed(1);
lrcAr = '"' + lrcAr+'"';
lrcAr = gap;
}
lrcText.value = 'let lrcAr = [' + lrcAr.map((item) => '\n\t[' + item + ']') + '\n];';
btnGap.disabled = true;
}
//校对按钮点击 ：启动微调gatTime机制
btnProof.onclick = () => {
getAr(lrcText.value);
if(lrcAr.length < 1) return false;
getUrl(mUrl.value);
btnProof.disabled = true;
}
//lrc上屏
up.onclick = () => {
lrcAr = (aud.currentTime - lrcAr).toFixed(1);
lrcText.value ='let lrcAr = [' + lrcAr.map((item) => `\n\t[${item},"${item}",${item || 'x'}]`) + '\n];';
selectText(mKey + 1, lrcText);
lrcText.scrollTop = mKey * 26;
up.disabled = true;
}
aud.addEventListener('pause', () => {
let time = (aud.currentTime - lrcAr).toFixed(1);
mUrl.value = lrcAr + ', ' + time;
up.disabled = false;
});
//进度监听
aud.addEventListener('timeupdate', () =>{
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr){
mKey = j;
mUrl.value = lrcAr;
}
}
audMsg.innerText = (aud.duration).toFixed(2) + ' | ' + (aud.currentTime).toFixed(2);
});
//函数：获取文本框数组
let getAr = (text) => {
let re = /.*lrcAr/;
let jsStr = text.replace(re, 'lrcAr');
(new Function(jsStr))();
if(typeof(lrcAr) === 'undefined') {
alert('数据非法！请确保 lrcAr 数组完整出现在文本框中');
throw new Error('lrcAr数组不存在');
}
}
//函数：选中textarea一行文本
let selectText = (line,ele) => {
let arr = ele.value.split('\n');
let pos1 = 0, pos2 = 0;
for(j = 0; j < line; j ++) {
pos1 += arr.length + 1;
}
pos1 += 1;
pos2 = pos1 + arr.length;
ele.setSelectionRange(pos1,pos2);
ele.focus();
}
//函数：获取音频地址
let getUrl = (url) => {
let reg = /\.?:wav|mp3|wma|ogg|aac|ape|flac$/;
if(reg.test(url.toLowerCase())) yp = url.trim();
aud.src = yp;
}
//函数：处理 斜小角分号
let rep = (str) =>str.replace(/\'/g,"\'");
</script>
本帖最后由 马黑黑 于 2022-9-21 19:02 编辑
花潮lrc加餐转换程序使用说明
一、功能简介
花潮lrc加餐转换程序用于给花潮专属lrc歌词添加模拟逐字同步的时间节点，故名“加餐”。顺便提一下：加餐的命名专利属小辣椒所有。
程序分两个功能模块：① 加餐；② 微调。
二、使用说明
程序需要如下完整结构的 lrcAr 歌词数组格式，将数组完整粘贴到大文本框里：
let lrcAr = [
['0.01','雪花飘'],
['4.09','演唱：邓丽君'],
['16.02','雪花飘'],
['20.02','飘起了多少爱恋'],
//…………
['133.09','飞满天']
];
（一）加餐
如果文本框中的数据合法，点击右下角的“加餐”按钮，文本框内的数据将会立马变成如下的样子，无需等待：
let lrcAr = [
,
,
,
,
//…………
];
每一行歌词数组都添加了一个时间节点，它实际上是记录该句歌词在整首歌中占用的时间，而我们需要的应当是从该句歌词的第一个字唱到或唱完该句的最后一个字所用的时间，因此，需要对加餐的结果进行——
（二）微调
微调需要音频地址，进行微调操作前，请务必 ① 在小文本框中输入音频可用的URL或本地音频地址；然后请 ② 确保大文本框的 lrcAr 歌词数组的合法性。下一步，点击“加餐”按钮后面的“微调”选项卡，“加餐”按钮变成“校对”按钮，此时点击“校对”按钮，程序底部出现audio播放器界面且处于可用状态，开始进入微调工作。具体微调操作是通过播放器播放中的暂停功能加以实现：
单击播放器上的播放按钮，当播放到某句歌词的最后一个字（唱到或差不多唱完）时，单击播放器界面上的暂停按钮，查看小文本框提供的用时信息，如果合适，单击双向上箭头按钮，大文本框里的对应歌词的用时时间信息会被修改，该句歌词此时会以选中方法高亮显示。
微调处理总是针对当前所唱的歌句，歌唱得快是很容易错过上屏操作。如果错过了上一句微调的上屏时间，可以马上或稍后回退从来。微调工作环节中，任何手动修改大小文本框的操作都无效，程序只接受通过播放器的暂停所提供的数据。
微调环节能接受未经加餐的花潮lrc歌词数据，首句微调后大文本框里的其它歌词用时节点信息通通为x，逐句微调后x会变成调整后的数字。
（三）其它
① 加餐与微调共享大小文本框，如果所处理的数据不改变，顺向操作即“加餐→微调”时，如非必要，同一首歌的操作在模式切换时可以不必重新粘贴数据；逆向操作即“微调→加餐”会整体修改大文本框的数据，请慎重操作，建议逆向操作前保存好已有的操作成果。
② 程序的一个操作周期理论上可以接连处理不同的歌词数组，但原则上要求只处理一首歌的数组信息，所以，要处理另外一首歌的数组数据，最好刷新或重新进入程序。
③ 由于audio的播放时间步进方式等原因，可能存在某些歌词掐不准时间的情形，如有，可在操作结束后手工对数组相关数据进行修正。
④ 微调操作中忘记了贴歌词url，可以在小文本框中补上，补好后单击程序界面的非操作载体的任何地方，audio播放器就会接收新输出的歌曲src。
制作会使用到音频且需播放，所以——
请不要在本页的回复中加入音、视频代码！谢谢合作！ 黑黑威武，定型版吗 黒黑我昨天晚上做的一个歌词开始一般播放器预览有音乐的，后来出国旅游了一下，音乐就是不出来，重新编辑歌词3次，都这样，奇怪s 马黑帅老师威武{:4_178:}{:4_178:}{:4_178:}{:4_178:} 小辣椒 发表于 2022-9-21 16:52
黑黑威武，定型版吗
预览，标题说有 近朱者赤 发表于 2022-9-21 17:40
马黑帅老师威武
{:4_191:} 小辣椒 发表于 2022-9-21 16:56
黒黑我昨天晚上做的一个歌词开始一般播放器预览有音乐的，后来出国旅游了一下，音乐就是不出来，重新编辑歌 ...
如果JS有错误，会影响音乐的播放 醉美水芙蓉 发表于 2022-9-21 17:37
为了歌词同步，黑黑老师连续做了3个教程，黑黑老师辛苦了！
这个是制作歌词模拟逐字同步的程序 马黑黑 发表于 2022-9-21 18:11
预览，标题说有
眼大无光，没有看见{:4_173:} 马黑黑 发表于 2022-9-21 18:12
如果JS有错误，会影响音乐的播放
估计乱加了代码，昨天我加了许多效果进去 小辣椒 发表于 2022-9-21 18:37
估计乱加了代码，昨天我加了许多效果进去
一个一个加，加成了再加下一个，不要贪心 小辣椒 发表于 2022-9-21 18:36
眼大无光，没有看见
走马观花的说 马黑黑 发表于 2022-9-21 18:50
走马观花的说
手机，看不清楚 马黑黑 发表于 2022-9-21 18:50
一个一个加，加成了再加下一个，不要贪心
今天回家去重新测试 小辣椒 发表于 2022-9-21 18:59
今天回家去重新测试
好的 小辣椒 发表于 2022-9-21 18:59
手机，看不清楚
{:4_181:} 黑黑又一个调整版，越弄越好了，辛苦了{:4_187:}