论坛 › 马黑黑教程专版 › 原生lrc歌词同步核心函数及其用法介绍

山人 发表于 2023-2-19 23:36

原生lrc歌词同步核心函数及其用法介绍

本帖最后由 山人 于 2023-2-19 23:38 编辑

以下两个函数，使用时各自写在一行里，这里按标准来写，便于大家研究改进。它们的作用是将原生lrc歌词解析为花潮格式播放器所使用的 lrcAr 数组变量：let lrcTime = (ar) => {
    let tmpAr = [];
    for (j = 0; j < ar.length - 1; j++) {
      if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
    }
    let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;
    tmpAr.push(aver);
    tmpAr.forEach((item, key) => {
      ar = item > aver ? aver : item;
    });
    return ar;
};

let getLrcAr = (text) => {
    let lrcAr = [];
    let calcRule = ;
    for (x of text.split('\n')) {
      let ar = [];
      let re = /\d+[\.:]\d+([\.:]\d+)?/g;
      let geci = x.replace(re, '');
      if (geci) {
            geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');
            let time = x.match(re);
            if (time != null) {
                for (y of time) {
                  let tmp = y.match(/\d+/g);
                  let sec = 0;
                  for (z in tmp) sec += tmp * calcRule;
                  ar = ;
                  lrcAr.push(ar);
                }
            }
      }
    }
    lrcAr.sort((a, b) => a - b);
    return (lrcTime(lrcAr));
}以上核心函数需要接入两个变量，变量应放在核心函数之前：

    let averAdd = 0, offset = 0;

变量 ① averAdd : 歌词用时平均值补偿。
变量 ② offset : lrc时间偏差值。

两个变量支持正负数、支持浮点数，取值依据自己体会。

下面给出帖子使用核心函数的代码范例（实际使用时请将注释去掉），红色部分是原生lrc歌词转为 lrcAr 数组变量的关键：

<style>
#papa {
      margin: auto;
      width: 1024px;
      height: 640px;
      background: gray url('图片地址') no-repeat center/cover;
      box-shadow: 8px 4px 20px hsla(0,0%,0%,.65);
      user-select: none;
      position: relative;
      z-index: 1;
}
</style>

<div id="papa">
    <!-- 帖子其他HTML代码 -->
</div>
<audio id="aud" src="音乐地址" loop autoplay></audio>

<script >
(function() {

      /* 这行是播放器插件代码 */

      /* 这行是全屏插件代码代码 */

      /* 以下两个变量必须 ① averAdd : 歌词用时平均值补偿 ② offset : lrc时间偏差值 */
      let averAdd = 0, offset = 0;

      /* 原生lrc歌词变量 */
      let geci = `
                歌词一
                歌词二
                歌词三
                /* ... */
                歌词N
      `;

      /* 两个核心函数各自写成一行 */
      let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
      let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}

      /* 下面是插件接口相关配置代码 */
      HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: '--bg: linear-gradient(hsla(200,80%,50%,.35),hsla(200,70%,45%,.6)); left: 30px; bottom: 20px;',
                player_css: '--color: snow; bottom: 100px; left: 20px;',
      });

      /* 下面是全屏插件代码 */
      FS({
                pa: papa,
                set: 'backgroun: transparent; color: snow; border: 2px dotted snow; left: 20px; top: 20px;',
      });
})();
</script>

庶民 发表于 2023-2-20 05:15

给你添一点点文字，也算俺的微薄赞助！

醉美水芙蓉 发表于 2023-2-20 07:04

红影 发表于 2023-2-20 09:12

这个解释非常清晰，两个核心函数的变量也十分必要，可以自己给出调整值了。{:4_187:}

马黑黑 发表于 2023-2-22 23:45

醉美水芙蓉 发表于 2023-2-20 07:04
谢谢三人老师分享教程！

山人

马黑黑 发表于 2023-2-22 23:45

红影 发表于 2023-2-20 09:12
这个解释非常清晰，两个核心函数的变量也十分必要，可以自己给出调整值了。

这里面有巧妙处

红影 发表于 2023-2-23 12:11

马黑黑 发表于 2023-2-22 23:45
这里面有巧妙处

我哪看得出巧妙处，我只知道好用就特别好{:4_173:}

马黑黑 发表于 2023-2-23 12:30

红影 发表于 2023-2-23 12:11
我哪看得出巧妙处，我只知道好用就特别好

那也成

红影 发表于 2023-2-23 12:44

马黑黑 发表于 2023-2-23 12:30
那也成

你不解说一下里面的巧妙？

马黑黑 发表于 2023-2-23 12:56

红影 发表于 2023-2-23 12:44
你不解说一下里面的巧妙？

这个需要自己慢慢体会

红影 发表于 2023-2-23 15:40

马黑黑 发表于 2023-2-23 12:56
这个需要自己慢慢体会

我没那本事{:4_173:}

马黑黑 发表于 2023-2-23 17:38

红影 发表于 2023-2-23 15:40
我没那本事

不急慢慢来

红影 发表于 2023-2-23 20:32

马黑黑 发表于 2023-2-23 17:38
不急慢慢来

慢了也没用啊，不懂就是不懂{:4_173:}

马黑黑 发表于 2023-2-23 21:13

红影 发表于 2023-2-23 20:32
慢了也没用啊，不懂就是不懂

慢慢会懂的

红影 发表于 2023-2-23 22:18

马黑黑 发表于 2023-2-23 21:13
慢慢会懂的

好吧，我期待哪一天的到来。

马黑黑 发表于 2023-2-23 22:18

红影 发表于 2023-2-23 22:18
好吧，我期待哪一天的到来。

有期待是对的

红影 发表于 2023-2-24 09:43

马黑黑 发表于 2023-2-23 22:18
有期待是对的

对呀，有期待就有希望。

马黑黑 发表于 2023-2-24 12:43

红影 发表于 2023-2-24 09:43
对呀，有期待就有希望。

是的，又希望就会有失望

红影 发表于 2023-2-24 19:35

马黑黑 发表于 2023-2-24 12:43
是的，又希望就会有失望

又被你绕回去了，可怜啊，我刚有点希望{:4_189:}

马黑黑 发表于 2023-2-24 20:33

红影 发表于 2023-2-24 19:35
又被你绕回去了，可怜啊，我刚有点希望

希望与失望本来就差不多

查看完整版本: 原生lrc歌词同步核心函数及其用法介绍