中年路口 （套用学习黑黑 Synthetech 播放器效果）
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa {
margin: 130px 0 50px calc(50% - 455px);
width: 1400px;
height: 800px;
--bg: url('https://wj.zp68.com/lxx/yunhua/2026/05/30/1F.jpg') no-repeat center/cover;
color: #fff;
position: relative;
width: 90vw;
height: 90vh;
overflow: hidden;
}
#bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
pointer-events: none;
}
.player {
position: absolute;
width: 480px;
left: 35%;
bottom: 12px;
z-index: 1000;
}
#msvg{
position:absolute; width:22vw; height:22vw;
transition:.75s; opacity:var(--opacity);
top:12%; left:37%;
z-index: 10;
}
#lrc {
--bg: linear-gradient(
180deg,
rgba(255, 255, 255, 0.50),
rgba(255, 255, 255, 0.85)
);
position: absolute;
left: 39%;
bottom: 13%;
font: normal 2.0em Microsoft YaHei, sans-serif;
color: transparent;
background: var(--bg);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85));
pointer-events: none;
z-index: 900;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 0%, transparent 0%);
mask-image: linear-gradient(to right, #000 0%, #000 0%, transparent 0%);
}
</style>
<div id="pa" class="pa">
<img id="bg" src="https://wj.zp68.com/lxx/yunhua/2026/05/30/1F.gif" alt="bg">
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="rot brightness">
<title>播放/暂停(Alt+X)</title>
<circle cx="0" cy="0" r="60" fill="#ffffff"/>
<text x="0" y="8" font-size="20" font-weight="bold" fill="#ff0000" text-anchor="middle">小辣椒</text>
</g>
</svg>
<div id="lrc"></div>
</div>
<script>
const LRC_TEXT = `
中年路口
抖音热曲
歌手：群星
又是一个不眠的午后
镜子里我紧锁着眉头
未来的路该往哪里走
理想蒙尘在岁月里头
城市的光淹没了星斗
一个人喝干了这杯酒
偶尔会想起当年的老友
如今是否也为家奔走
转眼就到了中年的路口
太多的话都堵在了心口
深夜里只有疲意的双手
敬那段再也回不去的自由
青春是谁磨朽了所有
那时的梦早已经生了锈
不敢再回首也不敢强求
往后的路还是要笑着走
酷咔音乐kkmp3.com
又是一个不眠的午后
镜子里我紧锁着眉头
未来的路该往哪里走
理想蒙尘在岁月里头
城市的光淹没了星斗
一个人喝干了这杯酒
偶尔会想起当年的老友
如今是否也为家奔走
转眼就到了中年的路口
太多的话都堵在了心口
深夜里只有疲惫的双手
敬那段再也回不去的自由
青春是谁磨朽了所有
那时的梦早已经生了锈
不敢再回首也不敢强求
往后的路还是要笑着走
谢谢欣赏
`;
function parseLines(text){
const out=[];
text.trim().split('\n').forEach(l=>{
const m=l.match(/^\[(\d+):(\d+\.\d+)\]\s*(.*)$/);
if(!m)return;
out.push({ t: +m*60 + +m, txt: m });
});
return out;
}
const lines = parseLines(LRC_TEXT);
for(let i=0;i<lines.length;i++){
lines.tEnd = (i+1 < lines.length) ? lines.t : (lines.t + 4);
}
var options = {
pa:'.pa',
urls:[['https://kkmp3.com/upload/music/music_6a159c06ac690.mp3','中年路口']],
btns:,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function(){
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js?v0', tzRun);
});
function tzRun(){
var aud = new AudPlayer(options);
var dr=_dr(msvg);
dr.ellipse(0,20,120,30,'rgba(0,100,100,.25)').addTo(g1).rotates(9);
var el = document.getElementById('lrc');
var bg = document.getElementById('bg');
var curIdx = -1;
var rafId = null;
function syncAll(){
bg.src = aud.aud.paused
? 'https://wj.zp68.com/lxx/yunhua/2026/05/30/1F.jpg'
: 'https://wj.zp68.com/lxx/yunhua/2026/05/30/1F.gif';
}
aud.aud.addEventListener('play', syncAll);
aud.aud.addEventListener('pause', syncAll);
aud.aud.addEventListener('ended', syncAll);
function renderMask(){
var t = aud.aud.currentTime;
var i = curIdx;
if(i<0 || t<lines.t || t>=lines.tEnd){
for(i=lines.length-1;i>=0;i--){
if(t>=lines.t){ break; }
}
if(i!==curIdx && i>=0){
el.textContent = lines.txt;
curIdx = i;
}
if(i<0){
el.style.webkitMaskImage =
el.style.maskImage =
'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
curIdx=-1;
}
}
if(curIdx>=0){
var seg = lines;
var dur = Math.max(seg.tEnd - seg.t, 0.01);
var p = Math.min(Math.max((t - seg.t)/dur, 0), 1);
var percent = (p*100).toFixed(2)+'%';
el.style.webkitMaskImage =
el.style.maskImage =
'linear-gradient(to right,#000 0%,#000 '+percent+',transparent '+percent+')';
}
rafId = requestAnimationFrame(renderMask);
}
aud.aud.addEventListener('play', ()=>{ if(!rafId) rafId=requestAnimationFrame(renderMask); });
aud.aud.addEventListener('pause', ()=>{ cancelAnimationFrame(rafId); rafId=null; });
aud.aud.addEventListener('ended', ()=>{
el.style.webkitMaskImage =
el.style.maskImage =
'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
});
rafId = requestAnimationFrame(renderMask);
}
function loadJs(u,cb){
var s=document.createElement('script'); s.src=u; s.onload=cb; document.head.appendChild(s);
}
</script>
@马黑黑
感谢黑黑源码分享，加了歌词同步，加了背景一键停止效果。 漂亮~好听好看，谢谢小辣椒精彩分享{:4_204:} 小辣椒 发表于 2026-5-31 13:08
@马黑黑
感谢黑黑源码分享，加了歌词同步，加了背景一键停止效果。
背景蓝天白云，加一个男子仰望天空有一种对人生思考的意境。这首歌很配。美啊！{:4_187:} 问好小辣椒，欣赏分享了！{:4_185:} 亲爱的还把小播里加了自己名字，有意思。
欣赏亲爱的好帖{:4_187:} https://pic.rmb.bdstatic.com/f18346c3511b8c46346f1adf56561955.gif 欣赏精美音画，下午好！
欣赏美曲，问好辣椒。 漂亮~好听{:4_204:} 矮油，不知不觉来到了中年路口，恭喜恭喜！ 小辣椒 发表于 2026-5-31 13:08
@马黑黑
感谢黑黑源码分享，加了歌词同步，加了背景一键停止效果。
{:4_199:} 这歌对味{:4_174:} 杨帆 发表于 2026-5-31 13:51
漂亮~好听好看，谢谢小辣椒精彩分享
问好杨帆，谢谢欣赏，因为时间的关系，我这个还没有修改完善的，现在开机时间少了一点 梦江南 发表于 2026-5-31 14:02
背景蓝天白云，加一个男子仰望天空有一种对人生思考的意境。这首歌很配。美啊！
阿姨，谢谢欣赏~~~~ 也是喜欢这首歌，想到那些中年人的辛苦，感同身受的 梦江南 发表于 2026-5-31 14:03
问好小辣椒，欣赏分享了！
阿姨我也是学习套用黑黑代码玩玩 红影 发表于 2026-5-31 16:49
亲爱的还把小播里加了自己名字，有意思。
欣赏亲爱的好帖
亲爱的，加个自己的名字哈哈，好玩的 也曾年轻 发表于 2026-5-31 16:51
问好老师，谢谢欣赏{:4_187:} 老谟深虑 发表于 2026-5-31 17:09
欣赏精美音画，下午好！
问好老师，谢谢欣赏{:4_187:} 梦油 发表于 2026-5-31 17:21
欣赏美曲，问好辣椒。
谢谢梦油的欣赏和支持{:4_187:}
页:
[1]
2