牵丝戏 (DJ亚明版） - 不只中二
本帖最后由 亚伦影音工作室 于 2024-4-1 14:12 编辑 <br /><br /><style>#papa{position: relative;width:1164px;height:620px;background:#000000;display: grid;place-items: center;overflow:hidden;margin-top:150px;margin-left: -180px;border:10pxdouble #cccccc;}
#mplayer {margin:0 auto;z-index: 40;position: absolute;top:85%;left:4%;background: url('https://pic.imgdb.cn/item/64a52b6c1ddac507cc5e4d9d.png') no-repeat center/cover; width: 60px;height: 60px;cursor: pointer;animation: spin 10s infinite linear;}
@keyframes spin {0% {transform: rotate(360deg);}}
#lrc{left: 20%;top: 80%;}#lrcc {left: 80%;transform: translate(-102%);top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #800000, #800000);border:0px solid black;position: absolute;z-index: 8;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 -1px 0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
.zt{text-align: center;width:800px;height:400px;position:absolute;z-index: 20;overflow:hidden;top: 25%;}
.zt e{width: 100%;height: 620px;position:relative;animation: myfirst 60s1;line-height: 620px;text-align: center;font: normal 3.5em 华文新魏;color: #800000;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0;}10% {opacity: 1;}15% {opacity: 1;}100%{opacity: 0;}}
#vid {position: absolute;width: 100%;height: 100%;top:0px;object-fit: cover;pointer-events: none;opacity: 1;mix-blend-mode: difference;z-index: 3;}
#vid1 {position: absolute;width: 100%;height: 100%;top:0px;object-fit: cover;pointer-events: none; opacity: 1;z-index: 2;}
</style>
<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3e69266ff58c15c4f3f5ebd4aa0ef15a_preview.mp4" autoplay="" loop="" muted=""></video>
<video id="vid1" src="https://video-js.51miz.com/preview/video/00/00/17/22/V-172204-64D35149.mp4" autoplay="" loop="" muted=""></video>
<audio id="MusicPlayer" src="https://www.nly3355.cn/mp3/ODIyMjE0NjYma3dtcDM=.mp3" loop autoplay>
</audio>
<ul class="zt">
<e><div>牵丝戏 </div><br> <div style="zoom: .7" >DJ亚明版<br>作曲：银临<br>演唱：不只中二</div></e>
</ul>
<div id="mplayer" title="暂停/播放"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<span id="lrcStr" style="visibility: hidden;">
牵丝戏 (DJ亚明版） - 不只中二
词：Vagary
曲：银临
编曲：名龙工作室 (亚明)
原唱：银临/Aki阿杰
出品：齐鼓文化
发行：六律五音
(本作品经词曲作者正式授权)
他们迂回误会
我却只由你支配
问世间哪有更完美
兰花指捻红尘似水
三尺红台 万事入歌吹
唱别久悲不成悲
十分红处竟成灰
愿谁记得谁 最好的年岁
嘲笑谁恃美扬威
没了心如何相配
盘铃声清脆
帷幕间灯火幽微
我和你 最天生一对
是你吻开笔墨
染我眼角珠泪
演离合相遇悲喜为谁
他们迂回误会
我却只由你支配
问世间哪有更完美
兰花指捻红尘似水
三尺红台 万事入歌吹
唱别久悲不成悲
十分红处竟成灰
愿谁记得谁 最好的年岁
风雪依稀秋白发尾
灯火葳蕤 揉皱你眼眉
假如你舍一滴泪 假如老去我能陪
烟波里成灰 也去得完美
风雪依稀秋白发尾
灯火葳蕤 揉皱你眼眉
假如你舍一滴泪
假如老去我能陪
烟波里成灰
也去得完美
</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 (MusicPlayer.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (MusicPlayer.currentTime - lrcAr);
showLrc(time);
};
/*函数 ：关键帧动画状态切换*/
let mState = () => MusicPlayer.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (MusicPlayer.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
vid=document.querySelector('#vid');
vid1=document.querySelector('#vid1');
mplayer.onclick = () => MusicPlayer.paused ? (MusicPlayer.play(),vid.play(),vid1.play()): (MusicPlayer.pause(),vid.pause(),vid1.pause());
MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！