遇见 - 邓园长
<style>
#papa { left:-402px; width: 1400px; height: 900px; top: 150px; background: darkred url('https://pic.imgdb.cn/item/6322080f16f2c2beb13c9f56.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute; left: 420px; top: 750px;bottom:80px; } /* 播放器svg */
#lrc { position: absolute; left: 480px; top: 500px; display: block; } /* 歌词svg */
#lrctxt { dominant-baseline: middle; font: bold 2.6em sans-serif; letter-spacing: 3px; }
#tmsg { fill: #ccc; font: normal 1em sans-serif; dominant-baseline: middle; }
#btnwrap { fill: #ccc; cursor: pointer; }
#btnwrap:hover { fill: orange; }
#d1{ position: absolute; width: 80px; height: 129px; top: 700px; left: 300px;opacity: 0.85; }
#d2{ position: absolute; width: 45px; height: 118px; top: 0px; left: 1330px;opacity: 0.95; }
#d3{ position: absolute; width: 45px; height: 118px; top: 0px; left: 10px;opacity: 0.95; }
#d4{ position: absolute; width: 45px; height: 118px; top: 0px; left: 680px;opacity: 0.95; }
</style>
<div id="papa">
<img id="d1" src="https://pic.imgdb.cn/item/6322083a16f2c2beb13cbfe3.gif" alt="" />
<img id="d2" src="https://pic.imgdb.cn/item/6322085216f2c2beb13cd37f.gif" alt="" />
<img id="d3" src="https://pic.imgdb.cn/item/6322085216f2c2beb13cd37f.gif" alt="" />
<img id="d4" src="https://pic.imgdb.cn/item/6322085216f2c2beb13cd37f.gif" alt="" />
<!-- 播放器 -->
<svg id="mplayer" width="750" height="80" shape-rendering="geometricPrecision">
<circle cx="30" cy="30" r="20" fill="none" stroke="url(#gradient)" stroke-width="3" />
<g id="mama" style="cursor: pointer">
<line x1="60" y1="30" x2="490" y2="30" stroke="transparent" stroke-width="20" />
<line id="track" x1="60" y1="30" x2="490" y2="30" stroke="snow" shape-rendering="crispEdges" />
<line id="prog" x1="60" y1="30" x2="490" y2="30" stroke="red" shape-rendering="crispEdges" />
</g>
<text id="tmsg" x="500" y="30">00:00 | 00:00</text>
<g id="btnwrap">
<path id="btnplay" d="M 22 20,22 40,42 30 z"></path>
<path d="M 29 20, 29 40, 32 40, 32 20, 29 20 z" fill="transparent"></path>
<path id="btnpause" d="M 24 20,24 40,29 40,29 20,24 20 z M 32 20,32 40,37 40,37 20,32 20 z" style="display: none"></path>
</g>
</svg>
<!-- lrc歌词 -->
<svg id="lrc" width="760" height="160">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="green"/>
<stop offset="50%" stop-color="snow"/>
<stop offset="100%" stop-color="gold"/>
</linearGradient>
</defs>
<text id="lrctxt" x="10" y="30" fill="transparent" stroke="url(#gradient)" shape-rendering="crispEdges">遇见 - 邓园长</text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','遇见 - 邓园长'],
['25.61','听见 冬天的离开'],
['30.74','我在某年某月 醒过来'],
['35.65','我想 我等 我期待'],
['40.79','未来却不能因此安排'],
['59.28','阴天 傍晚 车窗外'],
['64.61','未来有一个人在等待'],
['69.58','向左向右向前看'],
['74.78','爱要拐几个弯才来'],
['79.74','我遇见谁 会有怎样的对白'],
['85.03','我等的人 他在多远的未来'],
['89.89','我听见风来自地铁和人海'],
['95.09','我排着队 拿着爱的号码牌'],
['121.27','阴天 傍晚 车窗外'],
['126.45','未来有一个人在等待'],
['131.49','向左向右向前看'],
['136.72','爱要拐几个弯才来'],
['141.67','我遇见谁 会有怎样的对白'],
['146.81','我等的人 他在多远的未来'],
['151.96','我听见风来自地铁和人海'],
['157.04','我排着队 拿着爱的号码牌'],
['172.69','我往前飞 飞过一片时间海'],
['177.77','我们也曾在爱情里受伤害'],
['183.00','我看着路 梦的入口有点窄'],
['187.74','我遇见你是最美丽的意外'],
['193.52','总有一天 我的谜底会揭开']
];
let cc = {
x: 1*track.getAttribute('x1'),
len: track.getTotalLength(),
};
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1475319299.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
mama.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - cc.x) / cc.len;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';
tmsg.textContent = toMin(aud.currentTime) + " | " + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br><br><br> 怎么看着像是邓院长{:5_106:} 马黑黑 发表于 2022-9-15 12:12
怎么看着像是邓院长
哈哈，歌手的名字就是这个。 加林森 发表于 2022-9-15 12:12
哈哈，歌手的名字就是这个。
叫他改行，不当园长，当院长 马黑黑 发表于 2022-9-15 12:13
叫他改行，不当园长，当院长
如果她是幼儿园的园长呢。{:4_189:} 加林森 发表于 2022-9-15 12:16
如果她是幼儿园的园长呢。
那就改为幼儿院院长，院比园大 马黑黑 发表于 2022-9-15 12:18
那就改为幼儿院院长，院比园大
搞大的玩啊{:4_189:} 加林森 发表于 2022-9-15 12:19
搞大的玩啊
越大越好吧 马黑黑 发表于 2022-9-15 12:20
越大越好吧
真的假的？{:4_203:} 加林森 发表于 2022-9-15 12:22
真的假的？
俗话说多多益善，扩展一下，大也是多的 马黑黑 发表于 2022-9-15 12:31
俗话说多多益善，扩展一下，大也是多的
这个是不容许的。 加加现在开始和园长玩啦。。。{:5_116:} 加林森 发表于 2022-9-15 12:39
这个是不容许的。
你家不容许，别家容容许 小朋友吹得小气泡挺好的。 东篱闲人 发表于 2022-9-15 12:46
加加现在开始和园长玩啦。。。
你玩大的我玩小的。。。。{:4_189:} 马黑黑 发表于 2022-9-15 13:11
你家不容许，别家容容许
这个不知道了 梦油 发表于 2022-9-15 13:18
小朋友吹得小气泡挺好的。
好玩吧。 队长的专用小播放器的娃娃出场了{:4_199:} 这歌也是好听，队长多做几次这种效果，会熟能生巧了 加林森 发表于 2022-9-15 13:45
好玩吧。
你是脑洞大开啊。