愿我们温柔以待
<style>#papa { left: -214px; width: 1024px; height: 640px; background: #666 url('https://pic.imgdb.cn/item/6117bcda5132923bf8a8e4d6.png') 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;right: 100px; bottom: 20px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; display: block; top: 20px; }
#lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px snow, 2px 2px 3px #000; letter-spacing: 3px; }
</style>
<div id="papa">
<div id="mplayer">
<svg width="100%" height="100%" shape-rendering="geometricPrecision">
<g transform="rotate(-90, 60, 60)">
<circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.35" />
<circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="red" stroke-width="3" stroke-opacity="0.65"/>
</g>
<text fill="orange">
<tspan id="cur" x="40" y="55">00:00</tspan>
<tspan id="dur" x="40" y="75">00:00</tspan>
</text>
</svg>
</div>
<svg id="lrc" width="410" height="150">
<defs><path id="lrcPath" fill="none" stroke="red" d="M 20 20 Q 200 180 400 20" /></defs>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="blue"/>
<stop offset="35%" stop-color="orange"/>
<stop offset="65%" stop-color="gray"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<text x="0" y="20"><textPath id="lrctxt" xlink:href="#lrcPath">笑天 - 愿我们温柔以待</textPath></text>
</svg>
</div>
<script>
let lrcAr =[
['0.01','笑天 - 愿我们温柔以待'],
['3.09','作词：王超宇、漠杨'],
['7.06','作曲：蔷薇团长'],
['9.08','编曲：DJ 默涵'],
['11.09','合声：凌菲'],
['13.01','制作人：笑天'],
['15.03','LRC编辑：醉美水芙蓉'],
['17.05','女：遇见你在茫茫的人海'],
['22.07','你的笑容似春暖花开'],
['25.09','男：倘若眼神可以当作告白'],
['30.08','我再不想把视线移开'],
['34.01','女：或许缘分是最好安排'],
['39.02','今生只为这一次等待'],
['42.03','男：我把这份美好保存起来'],
['47.05','慢慢用心栽培灌溉'],
['51.02','女：但愿我们彼此温柔以待'],
['55.03','执子之手一起共赴未来'],
['58.08','男：任凭世事变迁桑田沧海'],
['63.06','对你的爱永不会更改'],
['67.03','女：但愿我们都能温柔以待'],
['71.09','从相濡以沫走过发白'],
['75.02','男：直到岁月长流容颜不在'],
['80.01','你仍然是我如初的女孩'],
['100.08','女：或许缘分是最好安排'],
['105.04','今生只为这一次等待'],
['108.05','男：我把这份美好保存起来'],
['113.06','慢慢用心栽培灌溉'],
['116.09','女：但愿我们彼此温柔以待'],
['121.05','执子之手一起共赴未来'],
['125.02','男：任凭世事变迁桑田沧海'],
['129.08','对你的爱永不会更改'],
['133.06','女：但愿我们都能温柔以待'],
['138.00','从相濡以沫走过发白'],
['141.06','男：直到岁月长流容颜不在'],
['146.03','你仍然是我如初的女孩'],
['150.04','女：但愿我们彼此温柔以待'],
['154.06','执子之手一起共赴未来'],
['158.02','男：任凭世事变迁桑田沧海'],
['162.09','对你的爱永不会更改'],
['166.04','女：但愿我们都能温柔以待'],
['171.01','从相濡以沫走过发白'],
['174.05','男：直到岁月长流容颜不在'],
['179.04','你仍然是我如初的女孩'],
['185.02','谢谢欣赏！']
];
let aud = new Audio();
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=233649313&.mp3';
aud.autoplay = true;
aud.loop = true;
let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
mplayer.onmousemove = (e) => {
if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}
mplayer.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
deg += (e.offsetX < 60 && e.offsetY < 60) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
} else {
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
cur.textContent = toMin(aud.currentTime);
dur.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);
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> 问好老师，真漂亮的帖，欣赏点赞！{:7_298:} 梦缘 发表于 2022-9-6 20:32
问好老师，真漂亮的帖，欣赏点赞！
谢谢老师支持！ 水芙蓉这个制作真漂亮。赞！{:4_199:} 加林森 发表于 2022-9-6 20:37
水芙蓉这个制作真漂亮。赞！
谢谢队长点评支持！ 好漂亮的帖子，水芙蓉真棒{:4_187:} 醉美水芙蓉 发表于 2022-9-6 20:39
谢谢队长点评支持！
不客气的。 欣赏佳作 本帖最后由 醉美水芙蓉 于 2022-9-7 07:00 编辑
红影 发表于 2022-9-6 20:49
好漂亮的帖子，水芙蓉真棒
红影美女晚上好！ 马黑黑 发表于 2022-9-6 20:58
欣赏佳作
黑黑老师晚上好！谢谢老师的代码，论坛有你更精彩！ 醉美水芙蓉 发表于 2022-9-6 21:34
黑黑老师晚上好！谢谢老师的代码，论坛有你更精彩！
{:4_190:} 醉美水芙蓉 发表于 2022-9-6 21:33
红影美女精晚上好！
美女精？{:4_170:} 红影 发表于 2022-9-6 22:14
美女精？
红影美女不好意思眼神不好，没有看到！ 我想把世界上最好的都给你，却发现世界上最好的就是你。{:4_204:} 安宁 发表于 2022-9-7 10:50
我想把世界上最好的都给你，却发现世界上最好的就是你。
谢谢美女点评！ 醉美水芙蓉 发表于 2022-9-7 07:01
红影美女不好意思眼神不好，没有看到！
呵呵，没事，知道是笔误{:4_173:}
页:
[1]