可爱的星星为什么最后一句歌词会跳舞
本帖最后由 马黑黑 于 2022-9-15 13:16 编辑☞ 可爱的星星
在 audio 控件的监听事件上，我使用一个 for 循环语句，让audio的当前播放时间与歌词数组的时间信息做比较，依照比较结果实现同步显示歌词中的对应句。for语句如下：
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
if(lrcKey == j) lrc.innerHTML = showLrc(lrcAr);
else continue;
}
}
嵌套在里层的 if 语句，设计的条件是 lrcKey 变量如果与for循环的步进变量 j 相等，则调用 showLrc() 函数，否则（else）暂停循环、等待下一个循环。变量 lrcKey 是用来表示所播放的歌词数组序号，比如播放第一句，它的值为 0 ，第一句进入播放它的值加 1，当它加到大于等于歌词数组元素总量（lrcAr.length)时，该数值非法（因为超出了数组总量），所以必须令其变回 0，从头开始。lrcKey 的值的变化，在 showLrc(text) 函数中：
let showLrc = (text) => {
let tstr = '';
Array.from({length: text.length}).forEach((ele,key) => {
if(text.substr(key,1).trim() != '') tstr += `<span class="lrcChar" style='top: ${ranNum(-10,10)}px; background: #${setColor()}; color: #${setColor()};'>${text.substr(key,1)}</span>`;
});
lrcKey += 1;
if(lrcKey >= lrcAr.length) lrcKey = 0;
return tstr;
}
最后一句歌词是 lrcAr.length - 1，即数值长度（数组成员总数）减去 1，因为数组下标从 0 开始。当变量 lrcKey 等于 lrcAr.length - 1 时，lrcKey 总是等于 for 循环到 j 等于 lrcAr.length - 1 之时的值，所以，嵌套里边的 if （如果）语句成立，所以每秒钟都调用 showLrc(text) 函数，所以该句歌词会跳舞，很漂亮的。
如果不需要最后一句歌词跳舞，成本最低的处理方法是给 lrcAr 数组在最后再加一个成员，该成员的数值为：
['240.00', '']
这里的 240.00 是歌曲总时长变为秒数，应根据自己的歌曲实际总时长进行换算。例如，一首歌播放总时长是 3分58秒，则换算成 3*60+58=238.00，这样构建最后一个数组元素就写成：
['230.00','']
完整结构的歌词数组则是：
let lrcAr = [
['00.00','花潮论坛好汉歌'],
['21.20','词|曲|演唱 - 马黑黑'],
['40.08','诶呦呦诶呦呦诶呦呦诶呦呦诶呦呦'],
['61.40','hoo hoo'],
//其它歌词略
['200.17','ooh ooh ooh'], //这是最后一句歌词
['238.00',''] //这是根据歌曲时长加入的空歌词
];
嵌套的判断语句，对每一句都判断的呢，黑黑聪明，这个同步歌词设计得真漂亮{:4_187:} 呵呵，最后一句任嵌套内部的语句去折腾，也挺好玩，一直跳到音乐结束。
最后的结束时间通常都是省略的，看到黑黑的这个，省略和不省略效果完全不同呢{:4_204:} ['00.00','花潮论坛好汉歌'],
['21.20','词|曲|演唱 - 马黑黑'],
['40.08','诶呦呦诶呦呦诶呦呦诶呦呦诶呦呦'],
这个例子也举得太有趣了，作词作曲加演唱，黑黑厉害了，影子申请第一个聆听{:4_189:} 红影 发表于 2022-9-15 14:55
['00.00','花潮论坛好汉歌'],
['21.20','词|曲|演唱 - 马黑黑'],
['40.08','诶呦呦诶呦呦诶 ...
这些都是高度机密 红影 发表于 2022-9-15 14:53
呵呵，最后一句任嵌套内部的语句去折腾，也挺好玩，一直跳到音乐结束。
最后的结束时间通常都是省略的，看 ...
也可以将最后一句设计为其他的内容，如谢谢欣赏之类的话语 红影 发表于 2022-9-15 14:50
嵌套的判断语句，对每一句都判断的呢，黑黑聪明，这个同步歌词设计得真漂亮
一般，过得去 感谢老师的好代码，欣赏学习中！{:4_204:} 梦缘 发表于 2022-9-15 20:41
感谢老师的好代码，欣赏学习中！
{:4_191:} 马黑黑 发表于 2022-9-15 18:15
这些都是高度机密
赶紧高歌一首呗{:4_173:} 马黑黑 发表于 2022-9-15 18:16
也可以将最后一句设计为其他的内容，如谢谢欣赏之类的话语
反正只要把那时间占用掉就行了呗。 马黑黑 发表于 2022-9-15 18:16
一般，过得去
很奇特的效果{:4_187:} 红影 发表于 2022-9-15 21:36
很奇特的效果
问题也会存在，将来慢慢去修复 红影 发表于 2022-9-15 21:36
反正只要把那时间占用掉就行了呗。
是这个道理 红影 发表于 2022-9-15 21:35
赶紧高歌一首呗
低调低调 马黑黑 发表于 2022-9-15 21:43
问题也会存在，将来慢慢去修复
能做出来就很厉害啊，黑黑真棒{:4_187:} 马黑黑 发表于 2022-9-15 21:44
是这个道理
今天我得早点下了，感冒了。黑黑晚安{:4_204:} 马黑黑 发表于 2022-9-15 21:44
低调低调
知道你唱了自己作词作曲的歌曲，却没听到，多难受{:4_173:} 红影 发表于 2022-9-15 22:10
知道你唱了自己作词作曲的歌曲，却没听到，多难受
那也木有办法，谁叫俺不想出名呢 红影 发表于 2022-9-15 22:09
今天我得早点下了，感冒了。黑黑晚安
晚安，好好休息