GLORIA-G.E.M.邓紫棋

加林森 发表于 2022-8-26 17:22

本帖最后由加林森于 2022-8-26 18:40 编辑 <br /><br /><style>
   #papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: gray url('https://pic.imgdb.cn/item/63088c5e16f2c2beb1e10add.png') no-repeat center/cover; position: relative; z-index: 1; }
   #mypic { position: absolute; top: 125px; right: 100px; width: 260px; transform: rotate(30deg); cursor: pointer; transition: all 2s; }
   #mypic:hover { box-shadow: -10px -10px 40px 10px rgba(255,255,255,.45); transform: scale(1.5); }
   #player { margin: auto; display: block; position: absolute; }
</style>

<div id="papa">
   <canvas id="player"></canvas>
   <div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" /></div>
</div>

<script>
let ctx = player.getContext('2d'),
   w = player.width = 350, h = player.height = 100,
   startX = 30, startY = 70, radius = 16,
   flag = false,
   color = { lrc: '#fa8c35', time: '#ffa631', track: '#eacd76', prg: 'red', circle: '#ffa631', btn: '#ca6924', btnhover: '#ca6924' };
   aud = new Audio();
let lrcAr = [
   ['1.90','GLORIA-G.E.M.邓紫棋'],
['13.66','凋落的叶灰濛的天'],
['20.07','总会等到新的季节'],
['26.93','浩瀚世界卑微的蝴蝶'],
['33.30','她会否等来谁的慰藉'],
['40.60','黎明以前伸手不见'],
['47.69','我的眼泪落在荒野'],
['54.34','在我耳边却一再听见'],
['60.69','若隐若现细语绵绵'],
['67.97','Gloria 不要害怕'],
['73.87','Gloria 爱里没有惧怕'],
['81.49','我的爱像川流不息'],
['88.14','它会洗涤一切伤疤'],
['99.22','在我身旁不必坚强'],
['105.50','让我背上你的重量'],
['112.35','你若迷惘我陪你流浪'],
['119.06','累了就让我带你飞翔'],
['126.26','Gloria 不要害怕'],
['133.05','Gloria 爱里没有惧怕'],
['139.81','我的爱像无穷深海'],
['146.41','它能容下天崩地塌'],
['153.78','Gloria 不要害怕'],
['160.42','Gloria 爱里没有惧怕'],
['167.28','我的爱在时间之外'],
['173.82','不曾离开不会离开'],
['181.24','Gloria 不要害怕'],
['187.93','Gloria 爱里没有惧怕'],
['194.75','我是爱我恆久忍耐'],
['201.34','我在等待等你回来'],
   ['210.04','谢谢欣赏']
];

aud.src = 'https://music.163.com/song/media/outer/url?id=1970550394.mp3';
aud.autoplay = true;
aud.loop = true;

drawBtn(aud.paused);
drawProgress(2, '00:00');
drawLrc('等待播放 ...');

let isHover = (x, y, cx, cy) => Math.pow(x - cx, 2) + Math.pow(y - cy, 2) <= Math.pow(radius, 2); //鼠标经过检测

player.addEventListener('mousemove', (e) => { //监听鼠标经过
   flag = isHover(e.offsetX, e.offsetY, startX, startY);
   if(flag) {
            player.style.cursor = 'pointer';
            drawBtn(aud.paused);
   } else {
            player.style.cursor = 'default';
            drawBtn(aud.paused);
   }
});

player.addEventListener('click', (e) => { if(flag) aud.paused ? aud.play() : aud.pause(); });

aud.addEventListener('playing',()=> drawBtn(false));
aud.addEventListener('pause',()=> drawBtn(true));

aud.addEventListener('timeupdate', () => { //进度监听
   let prg = 100 * aud.currentTime / aud.duration;
   drawProgress(2*prg, toMin(aud.duration) + ' | ' + toMin(aud.currentTime));
   for(j = 0; j < lrcAr.length;j ++) {
            if(aud.currentTime >= lrcAr) drawLrc(lrcAr);
   }
});

function drawLrc(text) { //lrc同步
   ctx.clearRect(0, 0, w, 50);
   ctx.save();
   ctx.fillStyle = color.lrc;
   ctx.textAlign = 'center';
   ctx.beginPath();
   ctx.font = '1.2em sans-serif';
   ctx.fillText(text, w/2, 30);
   ctx.fill();
   ctx.restore();
}

function drawProgress(prog, text) { //进度
   ctx.clearRect(startX + radius + 202, startY - 10, startX + radius + 206 + ctx.measureText(text).width, 40);
   ctx.beginPath();
   ctx.font = '14px sans-serif';
   ctx.textBaseline = 'middle';
   ctx.strokeStyle = color.track;
   ctx.moveTo(startX + radius + 4, startY);
   ctx.lineTo(startX + radius + 204, startY); //底线
   ctx.stroke();
   ctx.beginPath();
   ctx.strokeStyle = color.prg;
   ctx.moveTo(startX + radius + 4, startY);
   ctx.lineTo(startX + radius + 4 + prog, startY); //进度线
   ctx.stroke();
   ctx.fillStyle = color.time;
   ctx.fillText(text, startX + radius + 208, startY); //数字进度
   ctx.fill();
}

function drawBtn(id) { //绘制播放+暂停按钮
   ctx.clearRect(startX - radius, startY - radius, radius *2, radius*2);
   ctx.fillStyle = color.circle;
   ctx.beginPath();
   ctx.arc(startX, startY, radius, 0, 2*Math.PI);
   ctx.fill();
   ctx.fillStyle = flag ? color.btnhover : color.btn;
   ctx.beginPath();
   if (id) { //播放图标
            ctx.lineWidth = 1;
            ctx.moveTo(startX-radius / 2 + 1, startY - radius / 2);
            ctx.lineTo(startX - radius / 2 + 1, startY + radius / 2);
            ctx.lineTo(startX + radius / 2 + 1, startY);
            ctx.fill();
   } else { //暂停图标
            ctx.fillRect(startX - radius / 2 + 5, startY - radius / 2, 2, radius);
            ctx.fillRect(startX - radius / 2 + 10, startY - radius / 2, 2, radius);
   }
}

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>

加林森 发表于 2022-8-26 17:22

@马黑黑 @小辣椒

红影发表于 2022-8-26 18:50

队长修改了歌词和时间颜色，真不错{:4_187:}

加林森 发表于 2022-8-26 18:53

红影发表于 2022-8-26 18:50
队长修改了歌词和时间颜色，真不错

与头发一个颜色了。{:4_189:}

马黑黑 发表于 2022-8-26 19:20

红影发表于 2022-8-26 18:50
队长修改了歌词和时间颜色，真不错

队长越来越厉害了

加林森 发表于 2022-8-26 20:07

马黑黑发表于 2022-8-26 19:20
队长越来越厉害了

你教的啊。

马黑黑 发表于 2022-8-26 20:13

加林森发表于 2022-8-26 20:07
你教的啊。

我只是分享一些东东，这些东东怎么用看个人

加林森 发表于 2022-8-26 20:14

马黑黑发表于 2022-8-26 20:13
我只是分享一些东东，这些东东怎么用看个人

知道知道。我自己欣赏可以吧。

马黑黑 发表于 2022-8-26 20:15

加林森发表于 2022-8-26 20:14
知道知道。我自己欣赏可以吧。

我们也欣赏

红影发表于 2022-8-26 20:16

加林森发表于 2022-8-26 18:53
与头发一个颜色了。

是啊，很协调{:4_187:}

加林森 发表于 2022-8-26 20:17

红影发表于 2022-8-26 20:16
是啊，很协调

是的。歌词也同颜色了。

加林森 发表于 2022-8-26 20:18

马黑黑发表于 2022-8-26 20:15
我们也欣赏

好的好的。

小辣椒 发表于 2022-8-26 20:21

队长这个播放器颜色修改了，特棒{:4_208:}

小辣椒 发表于 2022-8-26 20:23

队长还加了动图，厉害的{:4_199:}

加林森 发表于 2022-8-26 20:27

小辣椒发表于 2022-8-26 20:21
队长这个播放器颜色修改了，特棒

是啊。

加林森 发表于 2022-8-26 20:27

小辣椒发表于 2022-8-26 20:23
队长还加了动图，厉害的

谢谢支持！

红影发表于 2022-8-27 19:36

加林森发表于 2022-8-26 20:17
是的。歌词也同颜色了。

不容易，队长的进步很大{:4_187:}

加林森 发表于 2022-8-27 20:06

红影发表于 2022-8-27 19:36
不容易，队长的进步很大

嗯嗯，慢慢摸索吧。

红影发表于 2022-8-27 20:42

加林森发表于 2022-8-27 20:06
嗯嗯，慢慢摸索吧。

队长加油{:4_187:}

页: [1]

花潮论坛's Archiver

GLORIA-G.E.M.邓紫棋