LRC歌词同步竖排效果

亚伦影音工作室 发表于 2025-8-26 14:05

本帖最后由亚伦影音工作室于 2025-9-26 22:18 编辑 <br /><br /><style>
#papa{margin: 140px 0 20px calc(50% - 721px); background:#000080 url(https://pic1.imgdb.cn/item/68ad4aae58cb8da5c8504966.webp)no-repeat center/cover;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1234567; position: relative;}
#bfq{ bottom: 34px;left:50%;position: absolute;width: 120px; height: 40px;overflow: hidden;z-index: 6;}
#cndpt{ bottom: 0px;
   left:35px; z-index: 60;
position: absolute;width: 40px; height: 40px;
background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png)no-repeat 0px 0px/cover; }
#enopg{
position: absolute;width: 40px; height: 40px;
background: url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover;
display:none;
}
#tmsg {position: absolute;z-index: 6;
   font: normal 14px sans-serif;
   color: #ffffff;
      bottom: 10px;
   left:0;}

#mypic {top:30%; left:55%;z-index: 6;
display: block;position: absolute;
width: 120px; height: 120px;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/1560px 120px;
animation: heart-burst steps(13) 2s infinite;mix-blend-mode: difference;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -1560px 0;}
}
#lrc {--state: paused;--motion: cover2;--tt: 2s;
position: absolute;z-index: 6;left: 8%; top: 10%;transform: translate(0%);letter-spacing: 2px;font:normal 3.2em/1em 华文隶书; font-weight:400;color: #000080;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre; background: url('https://pic1.imgdb.cn/item/68ad4aae58cb8da5c8504966.webp') center; background-clip: text;-webkit-background-clip: text;
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%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
#plane1{position: absolute;left: 250px;top: 0;width: 40px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T950 10");animation: move 10s linear infinite;}
   #plane2 {position: absolute;left: 250px;top: 0;width: 40px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 10s linear infinite;}
@keyframes move { to { offset-distance: 100%;} }

</style>
<div id="papa">
<img id="plane1" alt="" src="https://wj.zp68.com/lxx/yunhua/2025/08/18/niao.gif" />
            <img id="plane2" alt="" src="https://wj.zp68.com/lxx/yunhua/2025/08/18/niao.gif" />
<div id="bfq">
<div id="cndpt" onclick="pic()" >
<div id="enopg" ></div>
</div>
<div id="tmsg"></div>

</div>
<div id="mypic" ></div>
<div data-lrc="" id="lrc"></div>
<canvas id='canvas' width="1286" height="280"style="position: absolute; left:0px; bottom:0px;z-index: -1;"></canvas>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/6b/a5/56/20b6752b04d0ab8c9a28255446cd5291/audio.mp3" autoplay loop crossOrigin="anonymous"></audio>
<script >
function pic(){
varimgElement= document.getElementById('enopg');
if (imgElement.style.display === 'none' || imgElement.style.display === '') {
   imgElement.style.display = 'block';aud.pause();
} else {
imgElement .style.display = 'none';aud.play();
}
}
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');

plane1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>plane1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>plane1.style.animationPlayState = 'paused');

plane2.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>plane2.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>plane2.style.animationPlayState = 'paused');
aud.addEventListener('timeupdate', () => {
         tmsg.innerText = toMin(aud.currentTime) + '******' + toMin(aud.duration);
   });

   function toMin(val) {
         if (!val) return '00:00';
         val = Math.floor(val);
         let min = parseInt(val / 60);
         let sec = parseFloat(val % 60);
         if (min < 10) min = '0' + min;
         if (sec < 10) sec = '0' + sec;
         return min + ':' + sec;
   }
</script >
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `最美的情缘 (DJ何鹏版)
作词：玉镯儿
作曲：崔伟立
演唱：魏新雨
☆★Lrc编辑梅竹★☆
☆★协编兰菊★☆
● ● ● ● ● ● ●
等到那一天风停了花谢了
等到那一天雪化了月落了
我就化作化作一只蝴蝶
轻轻落在落在你指尖
(Music)
多情的下关风吹呀吹
吹不干千年的洱海
我遇见你的那一天
世上才有风花雪月
十里香上关花开呀开
开不完相思的缠绵
我相信最美的情缘
不在天上在人间
落在你指尖
(Music)
☆★梅竹谢谢欣赏★☆
=End=
`;
/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数：处理当前歌词索引 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 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;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),player.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),player.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
<script>
window.onload = function() {
var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(aud);
// we have to connect the MediaElementSource with the analyser
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
// analyser.fftSize = 70;
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);

// we're ready to receive some data!
var canvas = document.getElementById('canvas'),
   cwidth = canvas.width,
   cheight = canvas.height - 2,
   meterWidth = 2, //width of the meters in the spectrum
   gap =3, //gap between meters
   capHeight = 2,
   capStyle = '#fff',
   meterNum = 1286 / (1+ 2), //count of the meters
   capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(10, 20, 10, 250);
gradient.addColorStop(0.4, 'transparent');
gradient.addColorStop(0.8, '#ffff00');
gradient.addColorStop(1, '#ff0000');

// loop
function renderFrame() {
   var array = new Uint8Array(analyser.frequencyBinCount);
   analyser.getByteFrequencyData(array);
   var step = Math.round(array.length / meterNum); //sample limited data from the total array
   ctx.clearRect(0, 0, cwidth, cheight);
   for (var i = 0; i < meterNum; i++) {
         var value = array;
         if (capYPositionArray.length < Math.round(meterNum)) {
            capYPositionArray.push(value);
         };
         ctx.fillStyle = capStyle;
         //draw the cap, with transition effect
         if (value < capYPositionArray) {
            ctx.fillRect(i * 3, cheight - (--capYPositionArray), meterWidth, capHeight);
         } else {
            ctx.fillRect(i * 4, cheight - value, meterWidth, capHeight);
            capYPositionArray = value;
         };
         ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
         ctx.fillRect(i * 3.6 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
   }
   requestAnimationFrame(renderFrame);
}
renderFrame();
audio.play();
};

</script>

红影发表于 2025-8-26 14:44

竖排歌词同步漂亮，频谱更漂亮，还有美丽的蝶儿和两只鹤。
欣赏亚伦老师好帖{:4_199:}

梦油发表于 2025-8-26 16:53

欣赏佳作，问候亚伦。

杨帆发表于 2025-8-26 16:55

漂亮！谢谢亚伦老师精彩分享{:4_191:}

杨帆发表于 2025-8-26 17:09

本帖最后由杨帆于 2025-8-26 17:16 编辑 <br /><br />@亚伦影音工作室请亚伦老师帮助看看，怎么最近登录不了——

“亚伦影音在线html编辑器【试测试】|老小孩讲述”呢？谢谢{:4_190:}

提示：禁止访问

<img class="dancer" src="https://www.helloimg.com/i/2025/08/26/68ad7a41e517d.png" alt="" style="width: 350px; height: 193px; left: 50px; top: 140px;">

亚伦影音工作室 发表于 2025-8-26 17:35

杨帆发表于 2025-8-26 17:09
本帖最后由杨帆于 2025-8-26 17:16 编辑 @亚伦影音工作室请亚伦老师帮助看看，怎么最近登录不了—— ...

出问题了！用马老师的编辑器吧！

杨帆发表于 2025-8-26 18:41

亚伦影音工作室发表于 2025-8-26 17:35
出问题了！用马老师的编辑器吧！

是，请抓紧修复呀{:4_191:}

页: [1]

花潮论坛's Archiver

LRC歌词同步竖排效果