情之恋(DJ 版)

醉美水芙蓉 发表于 2023-6-1 20:35

本帖最后由醉美水芙蓉于 2023-6-1 20:40 编辑 <br /><br /> <style>
#papa {
margin: 20px -300px;
width: 1164px;
height: 640px;
box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/23462bad4ccd7ed2dd900851d3de3ca5_preview_raw.jpg')no-repeat center/cover;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#canv {
position: absolute;
display: block;
position: relative;
cursor: pointer;
z-index: 2;
}
#vid { display: none; }

#mypic {top:75%; left:10%;z-index: 4;
position: absolute;
width: 100px;
height: 100px;
cursor: pointer;
animation: spin 10s infinite linearvar(--state);
--state: paused;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

.wenzi { position: absolute; left: 10px; top: 30px; z-index: 4; color: pink; font: bold 30px/30px 'FangSong',serif;opacity: .8; }

#papa:hover #fullscreen { display:block ;}

#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 4}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
<canvas id="canv"></canvas>

<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1a5937289cfbf2690f6cd0fe61ae96e0_preview.mp4" autoplay loop muted></video>
<img id="mypic" src="https://pic.imgdb.cn/item/63e640e64757feff339cac44.png" alt="" />
<div class="wenzi">情之恋(DJ 版) - 路童</div>

<div data-lrc=" " id="lrc"> </div>

</div>

<audio id="aud" src="https://pan.111t.net/view.php/c558f98ab93f2c8f706b38096cdeec7b.mp3" autoplay loop></audio>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<style type="text/css">#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文隶书;
color: #000078;
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 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
情之恋(DJ 版)
作词：秦峰路童
作曲：路童秦峰
原唱：路童
红尘相思苦风雨漫漫长路
此情荡漾在心湖
寻你千百度云袖翩翩起舞
此景在灯火阑珊处
LRC编辑：醉美水芙蓉
荷花园明月光华映朱颜
红尘中犹如恍世隔千年
相对紫竹间醉看梨涡现
幽幽一缕残香魂萦梦牵
天地间皓月当空映珠帘
金桥前池中波光潋滟
共对清荷间梦中沉鱼落雁
一曲相思更胜万语千言
红尘相思苦风雨漫漫长路
此情荡漾在心湖
寻你千百度云袖翩翩起舞
此景在灯火阑珊处
在心间沧桑繁华如云烟
睡梦中轻拭相思的泪眼
红尘天地间如影共渡华年
许你一世情缘天上人间
天地间皓月当空映珠帘
金桥前池中波光潋滟
共对清荷间梦中沉鱼落雁
一曲相思更胜万语千言
红尘相思苦风雨漫漫长路
此情荡漾在心湖
寻你千百度云袖翩翩起舞
此景在灯火阑珊处
在心间沧桑繁华如云烟
睡梦中轻拭相思的泪眼
红尘天地间如影共渡华年
许你一世情缘天上人间
红尘相思苦风雨漫漫长路
此情荡漾在心湖
寻你千百度云袖翩翩起舞
此景在灯火阑珊处
在心间沧桑繁华如云烟
睡梦中轻拭相思的泪眼
红尘天地间如影共渡华年
许你一世情缘天上人间
许你一世情缘天上人间
谢谢欣赏！`;

/*变量：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>

南无月 发表于 2023-6-3 09:04

音乐好听，图里全是美人儿，好看~~视频跟着歌词一起暂停的，完美控制。欣赏水芙蓉美贴！{:4_187:}

红影发表于 2023-6-1 21:20

漂亮的制作，欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-6-1 21:22

红影发表于 2023-6-1 21:20
漂亮的制作，欣赏水芙蓉美女好帖

红影美女晚上好！

小辣椒 发表于 2023-6-1 21:31

这个是亚伦的代码吧，欣赏水芙蓉的精彩分享{:4_171:}

红影发表于 2023-6-1 21:44

醉美水芙蓉发表于 2023-6-1 21:22
红影美女晚上好！

问好水芙蓉，晚上好{:4_187:}

马黑黑 发表于 2023-6-1 22:15

欣赏精美作品

醉美水芙蓉 发表于 2023-6-1 22:17

小辣椒发表于 2023-6-1 21:31
这个是亚伦的代码吧，欣赏水芙蓉的精彩分享

是的，问候小辣椒晚上好！

醉美水芙蓉 发表于 2023-6-1 22:17

马黑黑发表于 2023-6-1 22:15
欣赏精美作品

问候老师晚上好！

马黑黑 发表于 2023-6-1 22:20

醉美水芙蓉发表于 2023-6-1 22:17
问候老师晚上好！

晚上好

樵歌发表于 2023-6-2 07:54

来欣赏水芙蓉的美贴。{:4_174:}

醉美水芙蓉 发表于 2023-6-2 11:43

樵歌发表于 2023-6-2 07:54
来欣赏水芙蓉的美贴。

樵歌中午好！

樵歌发表于 2023-6-2 20:42

醉美水芙蓉发表于 2023-6-2 11:43
樵歌中午好！

芙蓉晚上好{:4_190:}

醉美水芙蓉 发表于 2023-6-3 11:42

南无月发表于 2023-6-3 09:04
音乐好听，图里全是美人儿，好看~~视频跟着歌词一起暂停的，完美控制。欣赏水芙蓉美贴！

谢谢月儿支持！

梦缘发表于 2023-6-3 20:41

好听的歌，制作精美，欣赏问好！{:4_204:}

醉美水芙蓉 发表于 2023-6-3 20:42

梦缘发表于 2023-6-3 20:41
好听的歌，制作精美，欣赏问好！

谢谢老师欣赏！

页: [1]

花潮论坛's Archiver

情之恋(DJ 版)