爱情着了火-张冬玲【控】
本帖最后由 亚伦影音工作室 于 2023-12-31 10:25 编辑 <br /><br /><style>#papa { margin: 0px 0 0 calc(50% - 681px); width: 1200px; height: 640px; box-shadow: 0px 0px 0px #000; position: relative; z-index: 1; display: grid; place-items: center; background: url('https://pic.imgdb.cn/item/64ec3199661c6c8e54c39ffd.jpg') no-repeat center/cover; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none; mix-blend-mode:soft-light; z-index: 2; opacity: .95; }
#img_border{width:100%;height:100%;position: absolute;z-index: 1;background: url('https://pic.imgdb.cn/item/64ec3199661c6c8e54c39ffd.jpg') no-repeat center/cover;animation: rotm 3s linear infinite;}
@keyframes rotm {0% {opacity: 1;transform: scale(1);}100% {opacity: 0;transform:scale(4);filter:hue-rotate(0deg)contrast(100%)brightness(150%);}}
#prog { position: absolute; bottom: 85%;left: 4%; width: 300px; height: 2px; border: 0px solid lightblue; border-radius: 2px;background: linear-gradient(to right, #00ff00, #00ff00 var(--prg), #cccccc 0); color: #ffffff; --prg: 0%; --state: paused; z-index: 20;cursor: pointer;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 10px; }
#prog::after { right: 10px; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); bottom: -2px;}
#btnplay { position: absolute; top: -32px; left: 45%; opacity: .9;font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 10s infinite linear var(--state); }
.gecikuang { position: absolute; left:0%;top: 86%; width: 100%; height: 50px; z-index: 4;}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); top: 0%; font: normal 2.8em 华文行楷; color:#ff0000; -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:#000080 ; filter: #ffffff; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#flyBox { --w: 220px; width: var(--w); overflow: hidden; color: gold; position: absolute; left:30px;bottom: -30px; font-size: 14px; }
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
#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: 100}
</style>
<div id="papa">
<divid="img_border"></div>
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/14/33/V-143360-2F7C34AD.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video>
<span id="fullscreen">全屏观赏</span>
<div class="gecikuang">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停">❊</span>
<span id="slider"></span>
<div id="flyBox"><div>爱情着了火-张冬玲作词：齐眉儿 作曲：三儿。。。</div></div>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music290862392.mp3" autoplay loop></audio>
<script>
(function() {
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 vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());
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);
});
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `爱情着了火
作词：齐眉儿
作曲：三儿
编曲：91 音乐
混音：91 音乐
制作人：亚伦
出品：亚伦影音工作室
时光到底打碎了什么
惊醒我梦里动荡的烟火
爱的誓言还在夜空中闪烁
你却把我推给了寂寞
我也不知道谁对谁错
多美的梦都被现实打破
涌动的心如盛开的花朵
真可惜你只是个过客
爱情着了火执念是罪过
卑微的角色跋涉在沼泽
我的真心啊你随便挥霍
心痛的滋味还是逃不过
爱情着了火执念是罪过
黑夜的角落忧伤的漩涡
你给的折磨我全都尝过
怎么爱都是错挡不住心魔
时光到底打碎了什么
惊醒我梦里动荡的烟火
爱的誓言还在夜空中闪烁
你却把我推给了寂寞
我也不知道谁对谁错
多美的梦都被现实打破
涌动的心如盛开的花朵
真可惜你只是个过客
爱情着了火执念是罪过
卑微的角色跋涉在沼泽
我的真心啊你随便挥霍
心痛的滋味还是逃不过
爱情着了火执念是罪过
黑夜的角落忧伤的漩涡
你给的折磨我全都尝过
怎么爱都是错挡不住心魔
怎么爱都是错挡不住心魔
`;
/*变量 ：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); /*获得歌词数组*/
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
漂亮的制作。欣赏亚伦老师好帖{:4_199:}
页:
[1]