下辈子早点联系我-钰柃

亚伦影音工作室 发表于 2024-2-1 17:13

本帖最后由亚伦影音工作室于 2024-4-4 19:08 编辑 <br /><br /><style>
#papa { margin: 0 -300px; width: 1164px; height: 640px; background: url('https://pic.imgdb.cn/item/65bb5ce1871b83018a3ed949.jpg') no-repeat center/cover; box-shadow: 0px 0px 5px #000; position: relative; z-index: 1; display: grid; place-items: center;overflow: hidden;}
#tx{ position: absolute;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle, transparent, rgba(25,25,112,var(--opa)));
      --opa: .6;
}

#prog { position: absolute; bottom: 20px; width: 280px; height: 5px; background: linear-gradient(to right, #880000, #880000 var(--prg), white 0); color: snow; display: grid; place-items: center; --prg: 0%; --state: paused;border-radius: 2px;}
#prog::before, #prog::after { position: absolute;color: #880000; font:normal 1em 华文新魏;}
#prog::before { content: attr(data-cu); left:-45px; top: -5px; }
#prog::after { right: -45px; content: attr(data-du); ; top: -5px; }
#slider { position: absolute; width: 6px; height: 6px; background: #cccccc;box-shadow: 0px 0px 0px 4px #880000; left: var(--prg); border-radius: 50%; }
#btnplay { position: absolute; top: -70px; width: 50px; height: 50px; background: url('https://pic.imgdb.cn/item/65141b72c458853aef4cff4a.png') no-repeat center/cover; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); filter: hue-rotate(360deg);} }
#papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://pic.imgdb.cn/item/65bb5c9a871b83018a3dfe46.jpg')0 0/100% 100%; transition: 1s all ease;transform: scale(1); opacity: 1;background-blend-mode:lighten;}
#papa:hover::before { opacity:0 ; transform: scale(0.6);}
#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
   position: absolute;z-index: 6;
   left: 52%;
   transform: translate(-50%);
   top: 500px;
   font:normal 3em 华文新魏;
   font-weight:400;
   color: #000080;
   white-space: pre;
   -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: 20%;
   height: 100%;
   color: transparent;
   overflow: hidden;
   white-space: pre;
   background: var(--bg);

   -webkit-background-clip: text;
   animation: var(--motion) var(--tt) linear forwards;
   animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;filter: hue-rotate(360deg);}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;filter: hue-rotate(360deg);}}
</style>

<div id="papa">
<div id="tx"></div>

<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
   <span id="btnplay" title="播放/暂停"></span>
   <span id="slider"></span>
</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>
<audio autoplay="" id="aud" loop="" src="https://wp.shq.cab/view.php/b513e795a9444a5fd50bd225c2655b72.mp3"> </audio>

<script>
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 = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ?( aud.play() ):( aud.pause()); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;

setInterval (function() { if(!aud.paused) tx.style.setProperty('--opa', Math.random()); },1060);

</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `下辈子早点联系我-钰柃
词曲：隔壁老陈
编曲：大约冬季
混音：冯鑫阳
制作人：陈金文
OP：星汉马文化
究竟是谁的错就这样错过
我的心如刀在绞你泪眼婆娑
一片片残红无声的坠落
就像我们当初许下的承诺
我们都憧憬过幸福的生活
可是命运的安排都无法选择
虽然有太多太多的不舍
终究我们还是成为了过客
如果有下辈子请你早点联系我
我守着承诺等下一场烟火
今生已无缘相守看日落
但愿来世情路不会再蹉跎
如果有下辈子请你早点联系我
别让我带着承诺在尘世漂泊
今生受够了相思的折磨
但愿来世陪你奔赴万里山河
我们都憧憬过幸福的生活
可是命运的安排都无法选择
虽然有太多太多的不舍
终究我们还是成为了过客
如果有下辈子请你早点联系我
我守着承诺等下一场烟火
今生已无缘相守看日落
但愿来世情路不会再蹉跎
如果有下辈子请你早点联系我
别让我带着承诺在尘世漂泊
今生受够了相思的折磨
但愿来世陪你奔赴万里山河
如果有下辈子
请你早点联系我
别让我带着承诺在尘世漂泊
今生受够了相思的折磨
但愿来世陪你奔赴万里山河
但愿来世陪你奔赴万里山河`;

/*变量：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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.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>

红影发表于 2024-2-1 20:01

亚伦老师帖子里的美女好漂亮，喜欢{:4_187:}

红影发表于 2024-2-1 20:02

鼠标触动的两张图图都好美呢，步进的闪烁也漂亮。歌曲也好听。给亚伦老师点赞{:4_187:}

页: [1]

花潮论坛's Archiver

下辈子早点联系我-钰柃