情难枕 - 林慧萍【风动】,播放器版,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

亚伦影音工作室 发表于 2026-6-14 08:21:23

情难枕 - 林慧萍【风动】

本帖最后由亚伦影音工作室于 2026-6-14 17:53 编辑 <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:-17%;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/6a2df0d2f684928e3d6cbc85.png) no-repeat center/cover;}
.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 22% 100%, 36% 0, 64% 0, 45% 100%, 100% 100%, 100% 0%);
background:url(https://pic1.imgdb.cn/item/6a2df0d2f684928e3d6cbc85.png) no-repeat center/cover;
}

.filtered-background {
filter: url("#turbulence");
}
#player {position:absolute;top: 5%;z-index: 98;
left: 45%;
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="http://music.163.com/song/media/outer/url?id=258361.mp3" loop autoplay ></audio>
<script>
const gc = `情难枕 - 林慧萍
作词 : 李子恒作曲 : 李子恒
如果一切靠缘份
何必痴心爱着一个人
最怕藕断丝连难舍难分
多少黎明又黄昏
就算是不再流伤心泪
还有魂萦梦牵的深夜
那些欲走还留一往情深
都已无从悔恨

早知道爱会这样伤人
情会如此难枕
当初何必太认真
早明白梦里不能长久
相思不如回头
如今何必怨离分
除非是当作游戏一场
红尘任他凄凉
谁能断了这情份
除非把真心放在一旁
今生随缘聚散
无怨无悔有几人

如果一切靠缘份
何必痴心爱着一个人
最怕藕断丝连难舍难分
多少黎明又黄昏
就算是不再流伤心泪
还有魂萦梦牵的深夜
那些欲走还留一往情深
都已无从悔恨

早知道爱会这样伤人
情会如此难枕
当初何必太认真
早明白梦里不能长久
相思不如回头
如今何必怨离分
除非是当作游戏一场
红尘任他凄凉
谁能断了这情份
除非把真心放在一旁
今生随缘聚散
无怨无悔有几人
早知道爱会这样伤人
情会如此难枕
当初何必太认真
早明白梦里不能长久
相思不如回头
如今何必怨离分
除非是当作游戏一场
红尘任他凄凉
谁能断了这情份
除非把真心放在一旁
今生随缘聚散
无怨无悔有几人
/name/情难枕 `;
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>

klxf 发表于 2026-6-14 13:26:45

好听好看，谢谢亚伦老师精彩分享

醉美水芙蓉 发表于 2026-6-14 21:17:53

欣赏亚伦老师精彩播放器！

醉美水芙蓉 发表于 2026-6-14 21:19:16

旋转的歌词同步很漂亮！

页: [1]

纳兰音画网's Archiver

情难枕 - 林慧萍【风动】