想问情深有几许（DJ 默涵版）

亚伦影音工作室 发表于 2023-8-19 22:37

本帖最后由亚伦影音工作室于 2023-8-19 22:47 编辑 <br /><br /> <style type="text/css">
#papa {
width: 1200px;
height: 640px;
background: #000000 url('https://pic.imgdb.cn/item/64e0d36a661c6c8e541a39a5.jpg') no-repeat center/cover;
margin: 30px -300px ;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#prog { position: absolute; bottom: 20px; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:40%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 30px; font: normal 3.3em/0em serif;
color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
#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: 75%;
   font:normal 3em 华文新魏;
   font-weight:800;
   color: #0000;
   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: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}

#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
#screen {width: 150%;
height: 100%;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 8;
}
#screen img {
position: absolute;
-ms-interpolation-mode:nearest-neighbor;
image-rendering: optimizeSpeed;
}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
   <span id="btnplay" title="播放/暂停"> <P id="btn" >❊</p></span>
      <span id="slider"></span>
</div>
<div id="screen">
<img id="particles" src="https://pic.imgdb.cn/item/643c06530d2dde5777131c12.png" style="visibility:hidden;"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music266538535.mp3" autoplay loop></audio>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); 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;
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `想问情深有几许（DJ 默涵版）
演唱：刘晓超
作词：杨学涛
作曲：音宝
编曲：福洲
混音：DJ 默涵
统筹：李艳萍
》》》》》》
夜吹着冰凉凉的风
你消失在人海之中
我深深爱着你
却与你相拥似场梦
想问情深有几许我们的相遇
怎是悲伤结局
情深有几许人生的悲喜
都不由得自己
我无悔爱过你
无奈我这孤独命运
该怎么了断思念
诺言已变成了谎言
夜吹着冰凉凉的风
你消失在人海之中
我深深爱着你
却与你相拥似场梦
想问情深有几许我们的相遇
怎是悲伤结局
情深有几许人生的悲喜
都不由得自己
我无悔爱过你
无奈我这孤独命运
该怎么了断思念
诺言已变成了谎言`;

/*变量：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); /*获得歌词数组*/
})();

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
            fs = !fs;
   };
</script>

<script type="text/javascript">
r3d = {
////////////////////////////////::
N : 3.5,
FL : 350,
rY : 1.0,

////////////////////////////////::
O : [],
a : 0,
y : 0,
scr: 0,

init : function ()
{
this.scr = document.getElementById('screen');
this.img = document.getElementById('particles');

document.onselectstart = function () { return false; }
document.ondrag = function () { return false; }

for (var x = -r3d.N; x <= r3d.N; x++)
{
for (var z = -r3d.N; z <= r3d.N; z++)
{
o = document.createElement('img');
o.x3d = x;
o.z3d = z;
o.src = r3d.img.src;
r3d.scr.appendChild(o);
r3d.O.push(o);
}
}
this.scr.onmousemove = function (e)
{
if (window.event) e = window.event;
r3d.xm = e.clientX - r3d.nx;
r3d.ym = e.clientY - r3d.ny;
return false;
}

r3d.resize();
r3d.y = r3d.nh / 2;
r3d.ym = r3d.nh;
r3d.xm = r3d.nw * .9;
r3d.run();
},

resize : function () {
var o = r3d.scr;
r3d.nw = o.offsetWidth / 1.2;
r3d.nh = o.offsetHeight / 1.5;
for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent)
{
r3d.nx += o.offsetLeft;
r3d.ny += o.offsetTop;
}
},

run : function ()
{

r3d.a += (r3d.xm - r3d.nw) * .0001;
r3d.y += ((r3d.ym - r3d.nh) - r3d.y) / 40;
var ca = Math.cos(r3d.a);
var sa = Math.sin(r3d.a);

for (var i = 0, o; o = r3d.O; i++)
{
var x = o.x3d * (r3d.nw / 8);
var z = o.z3d * (r3d.nw / 8);
var X = sa * x + ca * z;
var Y = sa * z - ca * x;
var W = r3d.FL / (r3d.FL + Y);
var w = Math.round(W * r3d.nw /8);

o.style.left = Math.round(X * W + r3d.nw - w * .5) + 'px';
o.style.top = Math.round(r3d.y * W + r3d.nh - w * .5) + 'px';
o.style.width= Math.max(2, w) + 'px';
o.style.height = Math.max(6, w * r3d.rY) + 'px';
o.style.zIndex = w;

}
setTimeout(r3d.run, 32);
}

}

onload = function()
{
onresize = r3d.resize;
r3d.init();
}

</script>

红影发表于 2023-8-19 22:59

漂亮的制作，好听的歌曲。欣赏亚伦老师好帖{:4_187:}

醉美水芙蓉 发表于 2023-8-20 07:14

冬天的雨 发表于 2023-8-20 13:09

好看好听{:4_178:}

冬天的雨 发表于 2023-8-20 13:09

非常熟息的一首歌{:4_208:}

页: [1]

花潮论坛's Archiver

想问情深有几许（DJ 默涵版）