黄龄 - 入画江南

马黑黑 · 发表于 2022-8-23 17:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-8-23 17:43

参考代码（全）：

<style>
#papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: #ccc url('https://638183.freep.cn/638183/t22/jiangnan.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { position: absolute; right: 20px; top: 20px; cursor: pointer; }
#lrcbox { position: absolute; top: 20px; font: normal 1.8em sans-serif; color: #50616d; text-shadow: 1px 1px 2px #000, -5px -5px 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 = [
['0.01','入画江南 - 黄龄'],
['0.99','我有一段情入画后归旧梦故里'],
['8.24','我有一段爱落款上将前世印记'],
['17.03','一城天晴一城雨引我入戏'],
['22.08','平添着醉意'],
['25.38','豫园一抹香茗酌一杯飘逸'],
['50.01','看江南朝夕望天色如玉几番琉璃'],
['58.15','鸳与鸯梳羽听桥面眷侣细声如雨'],
['66.08','风追杨柳絮孩童正嬉戏'],
['69.95','货郎叫卖声淹没了马蹄'],
['73.45','谁家良人又来浣衣'],
['80.39','我有一段情入画后归旧梦故里'],
['89.09','我有一段爱落款上将前世印记'],
['97.09','一城天晴一城雨引我入戏'],
['100.34','平添着醉意'],
['105.65','豫园一抹香茗酌一杯飘逸'],
['130.08','人山人海里香火中浓郁谁的期许'],
['138.04','吹糖裹糖衣身在弄堂里巧琢甜蜜'],
['146.06','看一场百戏尝一口江鱼'],
['149.90','忽听树梢上麻雀争鸣啼'],
['153.62','谁家炊烟缓缓升起'],
['161.10','我有一段情如倦鸟屋檐下栖息'],
['168.88','我有一段爱几千里镌刻着回忆'],
['177.15','一方天地一潮汐让人入迷'],
['182.21','繁华盛世里'],
['185.50','桥下一尾锦鲤添岁月新意'],
['197.04','我有一段情入画后归旧梦故里'],
['204.96','我有一段爱落款上将前世印记'],
['213.16','一城天晴一城雨引我入戏'],
['218.01','平添着醉意'],
['221.62','豫园一抹香茗酌一杯飘逸']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=1817661979.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[j][0]) lrcbox.innerHTML = lrcAr[j][1];
}
});
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.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>