播放中 烟嗓哥《风吹起的过往》
本帖最后由 亚伦影音工作室 于 2026-6-14 08:58 编辑 <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: 620px;border:2px solid #ccc; background-color:#800100;left:-20%;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
.containe{
position:absolute;width: 100%;height: 100%;left: 0%;top: 0%;background: url(https://pic1.imgdb.cn/item/6a2df0caf684928e3d6cbc84.png) no-repeat center/cover;}
.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 38% 0, 58% 0, 73% 100%, 100% 100%, 100% 0%);
background:url(https://pic1.imgdb.cn/item/6a2df0caf684928e3d6cbc84.png) no-repeat center/cover;
}
.filtered-background {
filter: url("#turbulence");
}
#player {position:absolute;top: 55%;z-index: 98;
left: 25%;
width: 150px;
height: 150px;
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#wrapper {
position:absolute ; left:20%; bottom:30px;
font:500 50px/0px "Ma Shan Zheng","STKaiti";
letter-spacing:4px;cursor: pointer;
color:#ff0000;
white-space:pre;
width:860px; height: 70px; text-align:center;
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);
z-index:2;
}
.char {
display: inline-block;
padding: 0px 2px;
opacity: 0;
transform: translate(var(--x), var(--y))rotate(270deg) ;
animation: fadeIn 1.5s var(--delay) forwards,flas 0.5s linear infinite;
}
@keyframes fadeIn {
100% {
transform: translate(0, 0%);
opacity: 1;
}
}
@keyframes flas {
100% {filter: hue-rotate(360deg);}
}
</style>
<div id="bj">
<div class="containe">
<div class="main-background">
</div>
<div class="filtered-background"></div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<svgid="reflect" >
<filter id="turbulence" x="0%" y="0%" width="100%" height="100%" >
<feTurbulence id="ripples" numOctaves="6" seed="6" baseFrequency="0.02 0.05"></feTurbulence>
<feDisplacementMap scale="8" in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#ripples" attributeName="baseFrequency" dur="30s" keyTimes="0;0.5;1"
values="0.02 0.05;
0.04 0.07;
0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>
<div id="wrapper" >MP3带歌词播放器</div>
</div>
<audio id="aud" src="https://pan.29o.cn/view.php/5b54f634e264abdd4d660fcf2dc337c9.mp3" loop autoplay ></audio>
<script>
const gc = `烟嗓哥《风吹起的过往》
亚伦影音工作室出品
夏夜晚风吹过街巷
谁在岁月深处回头望
有些故事留在了过往
有些遗憾不敢再声张
我看着夜空一点星光
找不到曾停泊的海港
原来我们走散在远方
只留下回忆在风中荡
梦消散在盛夏的晚上
雨太急打湿了那月光
看那繁星坠落不知去向
我依然念着你的脸庞
心跟着骤雨迷失方向
风一吹又翻起了波浪
叹这红尘万丈太多阻挡
我还在等那地老天荒
我看着夜空一点星光
找不到曾停泊的海港
原来我们走散在远方
只留下回忆在风中荡
梦消散在盛夏的晚上
雨太急打湿了那月光
看那繁星坠落不知去向
我依然念着你的脸庞
心跟着骤雨迷失方向
风一吹又翻起了波浪
叹这红尘万丈太多阻挡
我还在等那地老天荒
`;
const gcAr = lrc2HC(gc);
let curkey = 1, 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 = 1;
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);
}
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',reflect.unpauseAnimations(),photos.style.animationPlayState = 'running',photoss.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',reflect.pauseAnimations(),photos.style.animationPlayState = 'paused',photoss.style.animationPlayState = 'paused');
</script>
漂亮，欣赏亚纶老师漂亮的制作{:5_150:}{:5_150:}{:5_150:} 漂亮，欣赏亚纶老师漂亮的制作{:5_150:}{:5_150:}{:5_150:} 漂亮，欣赏亚纶老师漂亮的制作{:5_150:}{:5_150:}{:5_150:} 感谢老师分享{:5_124:} {:5_150:}{:5_150:}{:5_150:}
页:
[1]