论坛 › 欢乐水吧 › LRC歌词同步竖排[两排歌词]效果

亚伦影音工作室 发表于 2025-8-29 12:27

LRC歌词同步竖排[两排歌词]效果

本帖最后由 亚伦影音工作室 于 2025-10-27 19:55 编辑 <br /><br /><style>
#papa { margin: 140px 0 20px calc(50% - 721px); background:#000 url(https://pic1.imgdb.cn/item/68ad4aa858cb8da5c8504947.webp)no-repeat center/cover;width: 1280px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }

#ydtp{ position: absolute;z-index: 3;width: 100%; height: 100%;animation: ydt 8s linear infinite ;background:#000 url(https://pic1.imgdb.cn/item/68ad4aa858cb8da5c8504947.webp)no-repeat center/cover;}

@keyframes ydt {100%{ transform:scale(1); opacity: 1;}50%{ transform:scale(1); opacity: 1;}0%{ transform:scale(5);opacity: 1;}}
#qmsvg{ position: absolute;z-index: 10;
      left: 5%;cursor: pointer;
      top: 5%;
       animation: rot 10s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#lrc{right:5%;top: 8%;}#lrcc {right:10%;top: 22%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;letter-spacing: 1px;font:normal 2.4em 华文隶书;color: #000;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;z-index: 9;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);background-clip: text; /* 重设背景剪裁风格（重要） */-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; filter: hue-rotate(360deg);} }
        @keyframes cover2 { from { height: 0;}to { height: 100%;filter: hue-rotate(360deg); } }
.list{list-style: none;left: -50px;top: 130px;width:100%;height:100%;position:absolute;z-index: 4;overflow:hidden;}
.list li{width: 90%;height: 90%;top: 10px;position:relative;line-height: 720px;text-align: center;left: 5%;font: 3004em/1em 华文隶书;animation: myfirst 40s10s2 ;color:#880000;transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);opacity:0;overflow:hidden;opacity: 0;}
.stop .list li{animation-play-state: paused;}
@keyframes myfirst {0% {
          opacity: 0;
           transform:perspective(600px) translate(0%,0%)scale(1)rotateX(0deg)rotateY(0deg);
        }
        10% {
          opacity: 1;
          transform: translateX(0px);
        }
50% {
          opacity: 1;
          transform: translateX(0px);
        }
60% { opacity: 1;transform:perspective(600px) translate(-120%,0%)scale(1)rotateX(90deg)rotateY(0deg);}

100% { opacity: 0;transform:perspective(600px) translate(-120%,0%)scale(1)rotateX(90deg)rotateY(0deg);}
}
</style>

<div id="papa">
<div id="ydtp" ></div>
<div id="testImg" ><div class="list">
<li><p style="zoom:1.2">情罪</p><br /><p style="zoom: .7">作词：高寒/作曲：高寒<br /><br />亚伦影音工作室<br/><br />演唱:陈瑞</p></li>
</div></div>
<svgid="qmsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="30" dy="30" font-size="30" fill="#ffff00"font-family="'楷体'">
                <textPath href="#path" textLength="600">花潮论坛亚伦影音工作室</textPath>
        </text>
</svg>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/8a/86/ab/c1457dd84a312a4ae19386243974e18d/audio.mp3" autoplay loop></audio>
</div>

<script>
qmsvg.onclick = () => aud.paused ? ( aud.play(),image.classList.remove('stop'),'paused'):(aud.pause(),image.classList.add('stop'),'running');
aud.addEventListener('playing', () => {ydtp.style.animationPlayState = 'running',qmsvg.style.animationPlayState = 'running'});
aud.addEventListener('pause', () =>{ydtp.style.animationPlayState = 'paused',qmsvg.style.animationPlayState = 'paused'});
var image= document.getElementById("testImg");
</script>
<span id="lrcStr" style="visibility: hidden;">
情罪-陈瑞
作词：高寒
作曲：高寒
演唱：陈瑞
编曲：薛云贻
和声：南妮
混音：乐艺文化
监制：陈瑞/飞翔
营销推广：何大为
出品 亚伦影音工作室
发行：亚伦影音工作室
「代码设计亚伦」
一个人跳着孤单的舞步
让寂寞就像流泪的红烛
任我心反反复复为谁而倾诉
端起孟婆汤心里无助
曾经欢乐有过无数
遗憾爱还是凄美的谢幕
我和你之间能有谁赢谁输
只有奈何桥分别一幕
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
今世豪情又该为谁醉
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      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 showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

杨帆 发表于 2025-8-29 13:10

本帖最后由 杨帆 于 2025-8-29 14:03 编辑

精美的新效果！谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2025-8-29 14:04

漂亮的转动圆环字，漂亮的分行竖排歌词，漂亮的地方运作方式。
欣赏亚伦老师的精美制作{:4_199:}

杨帆 发表于 2025-8-29 14:10

如能实现N列的LRC歌词同步竖排效果就更完美了{:4_191:}

梦油 发表于 2025-8-29 17:02

祝亚伦朋友七夕快乐！

小辣椒 发表于 2025-8-30 17:08

亚纶制作真漂亮，最好背景图的logo去了，看上去更加完美

偶然~ 发表于 2025-8-31 15:45

播放器唯美

偶然~ 发表于 2025-8-31 15:45

制作大气

偶然~ 发表于 2025-8-31 15:45

感谢亚伦影音工作室带来的精彩，辛苦了。

查看完整版本: LRC歌词同步竖排[两排歌词]效果