可爱的星星为什么最后一句歌词会跳舞

马黑黑 · 发表于 2022-9-15 13:10

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-9-15 13:16 编辑

☞ 可爱的星星

在 audio 控件的监听事件上，我使用一个 for 循环语句，让audio的当前播放时间与歌词数组的时间信息做比较，依照比较结果实现同步显示歌词中的对应句。for语句如下：

      for(j=0; j<lrcAr.length; j++) {
            if(aud.currentTime >= lrcAr[j][0]) {
                     if(lrcKey == j) lrc.innerHTML = showLrc(lrcAr[j][1]);
                     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',''] //这是根据歌曲时长加入的空歌词
];