频谱视频 弦外之音《可惜春风不懂我伤悲
本帖最后由 亚伦影音工作室 于 2026-10-12 04:09 编辑 <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");
#papa {position:relative; overflow:hidden; width:1286px; height: 720px;border:2px solid #ccc; background-color:#800100;left:-17%;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#vid {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
object-fit: cover;
}
#baiBox {
position:absolute; top:4%; left:4%;
font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
font-size:clamp(18px, 2.2vw, 32px);
font-weight:bold; color:#f46ff6;
transform-origin:top;
animation:yao 1.0s linear infinite alternate,color 3s linear infinite;
z-index:10;
}
@keyframes yao { from{transform:perspective(800px) rotatex(30deg)} to{transform:perspective(800px) rotatex(-30deg)} }
#tz { margin: 48% 0px; left:0%;width: 100%; height: 60px; border: 0px solid gray; position: absolute;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
#tz::before {content: attr(data-lrc); position: absolute; bottom: 0; width: 100%; height: 60px; text-align: center;font:500 45px/50px "Ma Shan Zheng","STKaiti";color: transparent; background: linear-gradient(45deg, red, orange, yellow, green, cyan, #fff, purple, red); -webkit-background-clip: text;}
#player { position: absolute;top:70% ;left:50%; cursor: pointer; text-align: center;width: 50px;
height: 50px;animation: rot 6s linear infinite; }
#bs {animation: color 3s linear infinite ;}
@keyframes rot { 0%{ transform: rotate(360deg); filter: hue-rotate(360deg)drop-shadow(#000 0.5px 0 0)drop-shadow(#000 0 0.5px 0)drop-shadow(#000 -0.5px 0 0) drop-shadow(#000 0 -0.5px0);} 100%{ transform: rotate(0deg); filter: hue-rotate(0deg)drop-shadow(#000 0.5px 0 0)drop-shadow(#000 0 0.5px 0)drop-shadow(#000 -0.5px 0 0) drop-shadow(#000 0 -0.5px0);} }
@keyframes color { 50% { filter: hue-rotate(360deg)brightness(260%);} }
#rect {position: absolute;
display: grid;
place-items: center;
width:100%;
height: 100%;
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);
}
</style>
<div id="papa" >
<video id="vid" src="https://www.panurl.cn/view.php/f6f71b27755dd4b417458cde6bf5a5cb.mp4" autoplay loop muted></video>
<div id="baiBox">
<span >弦外之音《可惜春风不懂我伤悲》</span>
</div>
<div id="bs" ><div id="tz" data-lrc="弦外之音《可惜春风不懂我伤悲》"></div></div>
<div id="player" title="播放/暂停" />
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<audio id="aud" src="https://www.qeecc.com/plug/down.php?ac=music&lk=mp3&id=eXl5eHhkY3lp" autoplay loop></audio>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
var lrc = `
弦外之音《可惜春风不懂我伤悲》
作词：范贵宾/张百万
作曲：范贵宾
演唱：弦外之音
编曲：SN/建行
混音：建行
统筹：黄国书
制作人：何文宇
制作统筹：谌宥/金佳欣
制作公司：音你星动
宣发总监：王倩/黄超亚
宣发：一米星空x 靠谱音乐x 有点点
监制：王腾飞
艺人经纪：韦耀
发行人：韦琪
发行公司：万象星云
你是否从没爱过我
靠近不过是一时寂寞
那承诺像风中泡沫
你一转身就消失无踪
都怪我爱你过了火
如今被回忆反复折磨
明明当初你先抱紧我
为何最后放不下的人 会是我
可惜春风不懂我伤悲
像你不懂我的泪
我把真心都给了你
你把余生给了谁
可惜春风不懂我伤悲
像你不懂我心碎
那付出的爱再收不回
伤透的心还能爱谁
你是否从没爱过我
靠近不过是一时寂寞
那承诺像风中泡沫
你一转身就消失无踪
都怪我爱你过了火
如今被回忆反复折磨
明明当初你先抱紧我
为何最后放不下的人 会是我
可惜春风不懂我伤悲
像你不懂我的泪
我把真心都给了你
你把余生给了谁
可惜春风不懂我伤悲
像你不懂我心碎
那付出的爱再收不回
伤透的心还能爱谁
可惜春风不懂我伤悲
像你不懂我的泪
我把真心都给了你
你把余生给了谁
可惜春风不懂我伤悲
像你不懂我心碎
那付出的爱再收不回
伤透的心还能爱谁
`;
getAr(lrc);
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',bs.style.animationPlayState = 'running',vid.play(),baiBox.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',bs.style.animationPlayState = 'paused',vid.pause(),baiBox.style.animationPlayState = 'paused');
</script> 本帖最后由 klxf 于 2026-10-11 18:20 编辑
好看的频谱视频，谢谢亚伦老师精彩分享 欣赏亚伦老师漂亮播放器！ 好看的频谱，谢谢亚伦老师分享！
页:
[1]