星座（双语歌词同步）

马黑黑

花潮论坛lrc在线

马黑黑

关于双语同步：

一、歌词数组结构

let lrcAr = [
    [18.21, "原文歌词<br>翻译歌词",4.3],
    //......
];

用折行标签 <br> 将两种语言的歌词隔开。

二、JS对歌词的处理 ：歌词显示函数 showLrc() 的改动

let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr[mKey][1];
        lrc.dataset.lrc = lrcAr[mKey][1].replace(/<br>/, '\n');
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

变化仅红色语句，主要是处理伪元素的 attr 接收文本属性的问题，用 \n 替换 <br> ，“\n” 是换行符号。

三、CSS 中 lrc::before 的改变：

伪元素通过 attr 接收 \n 为换行符需要一个前提，就是 white-space 属性，之前我们设置为 nowrap，现在要改为 pre，就这一个地方的变化 :

white-space: pre;

马黑黑

帖子的左上角是一幅小图

右边的星座，我开有转帖介绍： https://www.huachaowang.com/foru ... &extra=page%3D1

樵歌

那菇凉脖子仰望成那个角度，你都忍心，真是不知道惜花

红影

折行的歌词也可以实现同步，真没想到。黑黑厉害

红影

把星座放在圆环歌词的外面，这个构思好

亦是金

谢谢黑黑老师教学，我也照葫芦画瓢，试着做一个！

梦油

黑黑先生总是有出奇制胜的手段和技巧。

马黑黑

梦油 发表于 2022-11-13 09:29
黑黑先生总是有出奇制胜的手段和技巧。

思路人人有的

马黑黑

樵歌 发表于 2022-11-13 07:36
那菇凉脖子仰望成那个角度，你都忍心，真是不知道惜花

这可是不得脖子病的绝招，你也学学

马黑黑

红影 发表于 2022-11-13 07:54
折行的歌词也可以实现同步，真没想到。黑黑厉害

这个可以想得到的吧，只是之前懒得做

马黑黑

亦是金 发表于 2022-11-13 08:35
谢谢黑黑老师教学，我也照葫芦画瓢，试着做一个！

小辣椒

黑黑今天这个图图效果真美，美女含情脉脉

马黑黑

红影 发表于 2022-11-13 07:55
把星座放在圆环歌词的外面，这个构思好

里面的圆形的是播放控制器

小辣椒

这个双语我感觉音乐难找，可以汉语转双语吗

马黑黑

小辣椒 发表于 2022-11-13 12:16
这个双语我感觉音乐难找，可以汉语转双语吗

你发外语歌才用到双语的，发中文歌没有必要

小辣椒

马黑黑 发表于 2022-11-13 12:17
你发外语歌才用到双语的，发中文歌没有必要

这个我还得去找一下，看看有没有简单一点的

马黑黑

小辣椒 发表于 2022-11-13 12:19
这个我还得去找一下，看看有没有简单一点的

其实很多外语的歌词同步都有双语呢

红影

马黑黑 发表于 2022-11-13 12:15
这个可以想得到的吧，只是之前懒得做

这个还是挺难的，没看到前肯定不会。

马黑黑

红影 发表于 2022-11-13 13:46
这个还是挺难的，没看到前肯定不会。

原理不复杂