如今我也无话可说(Live 合唱版)
<p></p><style>#papa {
margin: 10px -10px;
width: 1164px;
height: 620px;
background:#000000 url(' ') center/cover no-repeat;
box-shadow: 3px 3px 2px #000;
position: relative;
z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {position: absolute;
display: block;
right: 0px;
top: 0px;
border-radius: 0%;
opacity: 1;
animation: opa 0s infinite alternate ;
}
#mplayer {
position: absolute;z-index: 4;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid #000000;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #000000;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent #000000;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#fg{width: 100%;height: 100%;top:0px; left:0px;position: absolute; z-index: 1;animation: slider 10s linear infinite ;opacity: 1;}
@keyframes slider {0% { background: linear-gradient(51deg, rgba(255, 0, 99, 0.31) 2%,rgba(69, 178, 69, 0) 68%,#27C607 85%,#29C609 100%); } 50% {background: linear-gradient(51deg, rgba(0, 93, 255, 0.22) 2%,rgba(69, 178, 69, 0) 68%,#073DC6 85%,#0929C6 100%);}100%{background: linear-gradient(51deg, rgba(22, 255, 0, 0.22) 2%,rgba(69, 178, 69, 0) 59%,#F80101 88%,#FF0404 92%);} }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<div id="fg"></div>
<div id="mplayer"></div>
<div data-lrc="《如今我也无话可说》" id="lrc">《如今我也无话可说》 </div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/784e-audiofreehighqps/0E/C1/GMCoOR4IqVdvACAAAAJGV-Ec.mp3" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/16/57/61b000c7c01fe.mp4" loop autoplay muted></video>
<script>
(function(){
let ctx = canv.getContext('2d');
let ww = canv.width = 1164, hh = canv.height =620;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
fg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>fg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>fg.style.animationPlayState = 'paused');
})();
</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: 84%;
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 = `
《如今我也无话可说》
演唱：李英
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); /*获得歌词数组*/
})();
</script> 又见阳光GG，沙发欣赏{:10_403:} 帖子制作精彩，音乐品质很棒，感谢费心精彩音乐{:9022:} 师兄来了啊{:10_402:}我才到家，帖子制作的很漂亮！{:10_402:} 欣赏阳光佳作{:10_403:}下午好
页:
[1]