我想你了 TO；走过岁月
<style>
#papa { left: -214px; width: 1024px; height: 543px; top: 150px;display: grid; place-items: center; background: #ccc url('https://wj.zp68.com/lxx/yunhua/2022/08/24/100.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { position: absolute; right: 20px; top: 380px; cursor: pointer; }
#lrcbox { position: absolute; left: 300px; top: 300px; font: normal 1.5em sans-serif; color: #866400; text-shadow: 1px 1px 2px #fff, -1px -1px 10px rgba(0,0,0,.65); }
</style>
<div id="papa">
<canvas id="player"></canvas>
<span id="lrcbox"></span>
</div>
<script>
let ctx = player.getContext('2d'),
w = h = player.width = player.height = 120,
prog = '点这播放',
angle = 0,
aud = new Audio();
let lrcAr = [
['00.01','这首【我想你了】'],
['04.00','歌词我没有找到'],
['08.00','是【不该看你的眼神】专辑'],
['14.00','里面的第一首歌曲'],
['18.00','2011年1月20日由'],
['22.00','广州市新时代影音公出品司'],
['28.00','可能发表时间早'],
['32.00','后面同名歌曲出来后'],
['35.00','以前的歌词我一下子搜索不到'],
['42.00','就做不了歌词同步了'],
['47.00','就请看看专辑介绍吧'],
['53.00','《不该看你的眼神》'],
['58.00','不是每一首歌曲背后有故事'],
['65.00','但或许每一首歌都有'],
['71.00','听着为之泪流'],
['75.00','昨日的传唱'],
['80.00','成就了今天的经典'],
['85.00','昨日的情感'],
['90.00','成为了今天的思绪'],
['95.00','如果你懂'],
['99.00','一切尽在音乐中'],
['104.00','经典歌曲总是给我们'],
['111.00','一首一首的好歌'],
['116.00','爱的苦涩酸甜在款款轻唱中'],
['123.00','是那么的感人至深'],
['128.00','体会动人的音乐'],
['134.00','欣赏音乐 分享快乐'],
['141.00','音乐让我们彼此走的很近'],
['149.00','很庆幸自己这些年'],
['155.00','在玩音乐中的快乐'],
['160.00','也是感谢岁月这么多年'],
['167.00','一路陪伴 一路开心'],
['174.00','最后谢谢大家欣赏'],
['250.00','最后谢谢大家欣赏']
];
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/08/24/01.mp3';
aud.loop = true;
aud.autoplay = true;
drawCircle();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
angle = 360 * aud.currentTime / aud.duration;
prog = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
drawCircle();
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
function drawCircle() {
ctx.clearRect(0, 0, w, h);
ctx.beginPath();
ctx.strokeStyle = '#f0fcff';
ctx.lineWidth = 8;
ctx.arc(w/2, h/2, w/2 - 6, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = ctx.fillStyle = '#50616d';
ctx.arc(w/2, h/2, w/2 - 6, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180);
ctx.stroke();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = '14px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(prog, w/2, h/2);
}
function toMin(val) {
if(!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let 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>
@走过岁月
岁月 继续煽情{:4_170:} @马黑黑
谢谢黑黑教程分享，套用一个小圆播放器{:4_187:} 岁月，专辑音乐过几天再说，我先下了 又是旧图，岁月不会嫌弃吧 小辣椒 发表于 2022-8-24 21:31
@走过岁月
来了，知道小辣椒想我，赶紧来 小辣椒 发表于 2022-8-24 21:32
岁月 继续煽情
继续 小辣椒 发表于 2022-8-24 21:43
岁月，专辑音乐过几天再说，我先下了
好的 小辣椒 发表于 2022-8-24 21:31
@走过岁月
俺先来了{:4_173:} 小辣椒 发表于 2022-8-24 21:44
又是旧图，岁月不会嫌弃吧
不嫌，只要好看，新旧无所谓 小辣椒做图也漂亮 背景图质感，明艳，漂亮{:4_187:} 岁月收礼开心{:4_187:} 走过岁月 发表于 2022-8-24 21:51
来了，知道小辣椒想我，赶紧来
岁月这个旧图，速度快一点完成{:4_189:} 小辣椒这么忙还做帖送我，辛苦小辣椒 {:4_179:} 走过岁月 发表于 2022-8-24 21:52
继续
哈哈{:4_172:} 走过岁月 发表于 2022-8-24 21:52
好的
现在床上手机回了 小辣椒 发表于 2022-8-24 21:43
岁月，专辑音乐过几天再说，我先下了
不用了，不要太辛苦了 千羽 发表于 2022-8-24 21:53
俺先来了
千羽晚上好，一起欣赏{:4_179:}