又是一夜冷风吹
本帖最后由 亚伦影音工作室 于 2026-7-3 19:25 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#bj {position:relative; overflow:hidden; width:1186px; height: 640px;border:2px solid #ccc; background-color:#800100;left:40%;transform:translate(-50%); --state: running;}
#tp{position:absolute;width: 100%;height: 100%;left: 0%;top: 0%;}
#tp img{width: 100%;}
#pic{ left: 3%;top: 78%; width: 120px;height: 100px; background: #0000; border-radius: 2%; box-shadow:0px 0px 0px 2px #eee,0px 0px 0px 3px #000; position: absolute; cursor: pointer; }
#wrapper {
position: absolute;
padding: 0px;
font-weight:100;font-size:2.2em;font-family:"Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
writing-mode: vertical-lr;white-space: pre;transform: translateX(-50%);text-align: center;
width: 60px;height:90%;left: 90%;z-index: 20;
top: 0;white-space: nowrap;
}
.char {
display: inline-block;
padding: 4px 0px;
opacity: 0;
transform: translate(var(--x), var(--y))rotate(-360deg) ;
animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite var(--state);
}
@keyframes fadeIn {
100% {
transform: translate(0, 50%);
opacity: 1;
}
}
@keyframes flash {
100% {filter: hue-rotate(360deg);}
}
#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px; bottom:3%; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#bj:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="bj" >
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<img id="tp"src = "https://pic1.imgdb.cn/item/6a4725760e2237bfad5fb670.gif">
<img id = "pic" src = "https://pic1.imgdb.cn/item/6a2d3392f684928e3d69c3f3.png">
<div id="wrapper" >MP3带歌词播放器</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3384865596.mp3" autoplay loop ></audio>
</div>
<script>
const gc = `《又是一夜冷风吹》
演唱：故事人生
编辑制作：亚伦影音
白天它不懂夜的黑
像你不懂我心有多累
为何把承诺说的那么美
让我陶醉又让我破碎
蝴蝶它最爱那花蕊
像我最爱和你相依偎
为何到最后真心换狼狈
付出一切事与愿违
又是一夜 一夜冷风吹
吹落花满地 吹来相思泪
苦酒入喉 一杯又一杯
深爱的你又在爱着谁
又是一夜 一夜不能寐
往事难翻篇 思念心中堆
不愿放弃 是错还是对
空空等候痴痴等你归
蝴蝶它最爱那花蕊
像我最爱和你相依偎
为何到最后真心换狼狈
付出一切事与愿违
又是一夜 一夜冷风吹
吹落花满地 吹来相思泪
苦酒入喉 一杯又一杯
深爱的你又在爱着谁
又是一夜 一夜不能寐
往事难翻篇 思念心中堆
不愿放弃 是错还是对
空空等候痴痴等你归`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 0 : 0);
const y = Math.random() * (Math.random() > 0.5 ? 0 : 0);
span.style.cssText += `
color: #${Math.random().toString(11).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
pic.onclick = () => aud.paused ? (aud.play(),pic.src = "https://pic1.imgdb.cn/item/6a2d3392f684928e3d69c3f3.png",tp.src = "https://pic1.imgdb.cn/item/6a4725760e2237bfad5fb670.gif") : (aud.pause(),pic.src = "https://pic1.imgdb.cn/item/6a2d338df684928e3d69c3f0.png",tp.src = "https://pic1.imgdb.cn/item/6a47257d0e2237bfad5fb675.jpg");
mState = () => bj.style.setProperty('--state',aud.paused ? (reflect.pauseAnimations(),'paused') : (reflect.unpauseAnimations(),'running'));
aud.onplaying = aud.onpause = () => mState();
let fs= true;
fullscreen.onclick = () => {
fs ? (bj.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
fs = !fs;
}
</script> 好漂亮的蝴蝶，小播更美。欣赏亚伦老师好帖{:4_187:} 人物表情做得十分灵动，十分成功。 好听好看，谢谢亚伦老师精彩分享{:4_190:}
页:
[1]