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

山人

以下两个函数，使用时各自写在一行里，这里按标准来写，便于大家研究改进。它们的作用是将原生lrc歌词解析为花潮格式播放器所使用的 lrcAr 数组变量：

1. let lrcTime = (ar) => {
   
2.     let tmpAr = [];
   
3.     for (j = 0; j < ar.length - 1; j++) {
   
4.         if (j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j + 1][0] - ar[j][0]).toFixed(1));
   
5.     }
   
6.     let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;
   
7.     tmpAr.push(aver);
   
8.     tmpAr.forEach((item, key) => {
   
9.         ar[key][2] = item > aver ? aver : item;
   
10.     });
    
11.     return ar;
    
12. };
    
13. 
    
14. let getLrcAr = (text) => {
    
15.     let lrcAr = [];
    
16.     let calcRule = [60, 1, 0.001];
    
17.     for (x of text.split('\n')) {
    
18.         let ar = [];
    
19.         let re = /\d+[\.:]\d+([\.:]\d+)?/g;
    
20.         let geci = x.replace(re, '');
    
21.         if (geci) {
    
22.             geci = geci.replace(/[\[\]\'"\t,]s?/g, '');
    
23.             let time = x.match(re);
    
24.             if (time != null) {
    
25.                 for (y of time) {
    
26.                     let tmp = y.match(/\d+/g);
    
27.                     let sec = 0;
    
28.                     for (z in tmp) sec += tmp[z] * calcRule[z];
    
29.                     ar[0] = [parseFloat(sec.toFixed(2)) + offset, geci];
    
30.                     lrcAr.push(ar[0]);
    
31.                 }
    
32.             }
    
33.         }
    
34.     }
    
35.     lrcAr.sort((a, b) => a[0] - b[0]);
    
36.     return (lrcTime(lrcAr));
    
37. }

复制代码

以上核心函数需要接入两个变量，变量应放在核心函数之前：

    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 = `
                [00:03:20]歌词一
                [00:09.72]歌词二
                [00:015.02]歌词三
                /* ... */
                [02:56.00]歌词N
        `;

        /* 两个核心函数各自写成一行 */
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar[key][2] = item > aver ? aver : item;});return ar;};
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = [60,1,0.001];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[z] * calcRule[z];ar[0] = [parseFloat(sec.toFixed(2)) + offset, geci];lrcAr.push(ar[0]); }}}}lrcAr.sort((a,b)=> a[0] - b[0]);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 07:04
谢谢三人老师分享教程！

山人

马黑黑

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

这里面有巧妙处

红影

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

我哪看得出巧妙处，我只知道好用就特别好

马黑黑

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

那也成

红影

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

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

马黑黑

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

这个需要自己慢慢体会

红影

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

我没那本事

马黑黑

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

不急慢慢来

红影

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

慢了也没用啊，不懂就是不懂

马黑黑

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

慢慢会懂的

红影

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

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

马黑黑

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

有期待是对的

红影

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

对呀，有期待就有希望。

马黑黑

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

是的，又希望就会有失望

红影

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

又被你绕回去了，可怜啊，我刚有点希望

马黑黑

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

希望与失望本来就差不多