再会啦心爱的无缘的人(国语版) - 大哲
本帖最后由 亚伦影音工作室 于 2024-4-16 10:04 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 693px); width: 1164px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp1/vmlm.webp') no-repeat center/cover; box-shadow: 0px 0px 2px #000; position: relative; z-index: 1; display: grid; place-items: center;overflow: hidden; }
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0.1s all ease;}
#mplayer {z-index: 80;
position: absolute;
top:90%; left:50%;
bottom: 20px;
width: 35px;
height: 35px;background:#333333;
border: 4px solid #FFFFFF;
border-radius: 50%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #ffffff;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 14px;
border-width: 10px 12px;
border-color: transparent transparent transparent #ffffff;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(90deg, #F80F03 9%,rgba(46, 246, 1, 0.99) 29%,#0823FB 55%,#00FF16 75%,#F50701 91%); position: absolute; top: 15px; font: bold 2.4em sans-serif; 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); pointer-events: none; z-index: 9; font:normal 3em 华文新魏; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; border-bottom: 4px dashed #880000; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0%; }to { width: 100%; } }
@keyframes cover2 { from { width: 0%; }to { width: 100%; } }
</style>
<div id="papa">
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/83195a5e38fca59238cbc5333d8541ac_preview.mp4" muted autoplay loop></video>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
<span id="mplayer" title="播放/暂停"></span>
</div>
<audio autoplay="" id="aud" loop="" src="https://bzgz.club/view.php/1dfd6f769ac05039cca2532687971002.mp3"> </audio>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `再会啦心爱的无缘的人(国语版) - 大哲
作词：熊天益
作曲：熊天益
北风在夜里冷冷的吹
强忍住的泪水
按捺着心中的伤悲
这次我永不回
等待的爱情啊
像朵雾里花
我忙忙地追逐朦朦胧胧的她
痴心人儿头一撞
春夏秋冬多少转
醒来才知道她根本不能指望
再会了心爱的我的爱人
昨日像傻人编制的梦
坚持的勇气
只为了换得 爱的温存
再会了心爱的我的爱人
是否你倾听我的歌声
也想起这个永远难忘记你的人
北风在夜里冷冷的吹
强忍住的泪水
按捺着心中的伤悲
这次我永不回
等待的爱情啊
像朵雾里花
我忙忙地追逐朦朦胧胧的她
痴心人儿头一撞
春夏秋冬多少转
醒来才知道她根本不能指望
再会了心爱的我的爱人
昨日像傻人编制的梦
坚持的勇气
只为了换得 爱的温存
再会了心爱的我的爱人
是否你倾听我的歌声
也想起这个永远难忘记你的人
痴心人儿头一撞
春夏秋冬多少转
醒来才知道她根本不能指望
再会了心爱的我的爱人
昨日像傻人编制的梦
坚持的勇气
只为了换得 爱的温存
再会了心爱的我的爱人
是否你倾听我的歌声
也想起这个永远难忘记你的人`;
/*变量 ：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));
};
/*函数 ：处理当前歌词索引 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 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;
};
/*函数 ：关键帧动画状态切换*/
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); /*获得歌词数组*/
})();
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.onclick = (e) => { e.stopPropagation(); aud.paused ?( aud.play(),vid.play() ):( aud.pause(),vid.pause()); }
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</script>
又一个特殊效果的歌词同步，真漂亮。欣赏亚伦老师好帖{:4_187:}
页:
[1]