孙露 - 离别的秋天 ——祝教师节日快乐 - 音乐沙龙 - 花潮论坛

岩新新 发表于 2024-9-10 10:59

孙露 - 离别的秋天 ——祝教师节日快乐

本帖最后由岩新新于 2024-9-10 11:49 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_817271">
<style>
#papa { margin: 150px 0 20px calc(50% - 621px); background:#800 url('https://webftp-bbs.hnol.net/yx2021/pj151/12.gif')no-repeat center/cover;width: 1164px;

height: 600px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }

#mdiv {z-index: 10;
--size: 160px;
--color: teal;
position: relative;
left: calc(-20% - var(--size) / 2);
top: 20px;
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
cursor: pointer;
}
#mdiv::before, #mdiv::after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
border-color: var(--color) transparent;
border-radius: 20%;

filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }
#vid {z-index: 2;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: radial-gradient(black 10% ,transparent 90%);
}
#vido {z-index: 1;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;

}
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000;white-

space: pre;-webkit-background-clip: text;z-index: 10;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: 20%;height: 100%;color: #880000;overflow: hzidden;white-space: pre; animation:

var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="mdiv" title=""></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://webftp-bbs.hnol.net/yx2021//pj151/031.swf" autoplay loop></audio>
<video id="vid" src="" autoplay loop muted></video>
<video id="vido" src="" autoplay loop muted></video>
</div>
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play()):(aud.pause(),vid.pause(),vido.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };
</script>
<span id="lrcStr" style="visibility: hidden;">
孙露 - 离别的秋天 - DJ安仔版

作词：高航

作曲：高航

轻轻柔柔的风

吹过我的胸口

你我却站在这离别的路口

没有一句挽留

没有一句借口

只有影子在随着那时间游走

我们的昨天太短

等不到天长地久

我们的明天太远

换不来幸福相守

离别的天灰色的蓝

承载着我的旧梦

挥别的手再多温柔

握不住心里的痛

我的明天是哪一天

我才能停止想念

忘了时间忘了昨天

爱与恨不再重演

没有一句挽留

没有一句借口

只有影子在随着那时间游走

我们的昨天太短

等不到天长地久

我们的明天太远

换不来幸福相守

离别的天灰色的蓝

承载着我的旧梦

挥别的手再多温柔

握不住心里的痛

我的明天是哪一天

我才能停止想念

忘了时间忘了昨天

爱与恨不再重演

离别的天灰色的蓝

承载着我的旧梦

挥别的手再多温柔

握不住心里的痛

我的明天是哪一天

我才能停止想念

忘了时间忘了昨天

爱与恨不再重演

忘了时间忘了昨天

爱与恨不再重演
</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');
   lrc.style.setProperty('--state', 'running');
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');
   lrcc.style.setProperty('--state', 'running');
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"),mdiv.style.animationPlayState="paused"):

(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.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;
            }
   }
});
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></td></tr></table>

彩云归 发表于 2024-9-10 12:54

精彩，谢谢分享！

红影发表于 2024-9-10 19:18

漂亮的制作。今天是教师节，借新新好帖，同祝所有的老师们节日快乐{:4_187:}{:4_177:}

页: [1]

花潮论坛's Archiver

孙露 - 离别的秋天 ——祝教师节日快乐