《小步舞曲》- 巴赫大家来跳舞！ - 第2页 - 欢乐水吧 - 花潮论坛

加林森 发表于 2022-7-12 20:26

本帖最后由加林森于 2022-8-26 17:49 编辑 <br /><br />马黑黑发表于 2022-7-12 20:21
嗯，谢谢小辣椒
我都得谢谢你们了。

<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: 'lightblue', 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-7-12 20:56

加林森发表于 2022-7-12 20:26
我都得谢谢你们了。

不用谢我的

加林森 发表于 2022-7-12 21:19

马黑黑发表于 2022-7-12 20:56
不用谢我的

必须的。

马黑黑 发表于 2022-7-12 21:21

加林森发表于 2022-7-12 21:19
必须的。

我只是提供样式，怎么用，还是个人的事情，是自己的努力才有好的效果

加林森 发表于 2022-7-12 21:26

马黑黑发表于 2022-7-12 21:21
我只是提供样式，怎么用，还是个人的事情，是自己的努力才有好的效果

你说的有道理，就听你的。另外的我自己决定。

樵歌发表于 2022-7-12 21:30

队长年青时舞姿优美{:4_189:}

醉美水芙蓉 发表于 2022-7-12 21:31

马黑黑 发表于 2022-7-12 21:38

加林森发表于 2022-7-12 21:26
你说的有道理，就听你的。另外的我自己决定。

嗯嗯{:4_181:}

加林森 发表于 2022-7-12 21:58

樵歌发表于 2022-7-12 21:30
队长年青时舞姿优美

这个到是真的。

加林森 发表于 2022-7-12 21:59

醉美水芙蓉发表于 2022-7-12 21:31
欣赏队长佳作！

{:4_180:}

加林森 发表于 2022-7-12 21:59

马黑黑发表于 2022-7-12 21:38
嗯嗯

好的。

梦油发表于 2022-7-13 10:19

加林森发表于 2022-7-12 18:19
这个我不知道了。

如果有这么一天，老林一定要翩翩起舞哦。

加林森 发表于 2022-7-13 12:32

梦油发表于 2022-7-13 10:19
如果有这么一天，老林一定要翩翩起舞哦。

这个应该没有问题的。

梦油发表于 2022-7-13 16:37

加林森发表于 2022-7-13 12:32
这个应该没有问题的。

好啊！那是我一定为你鼓掌、叫好。

加林森 发表于 2022-7-13 20:31

梦油发表于 2022-7-13 16:37
好啊！那是我一定为你鼓掌、叫好。

{:5_112:}

页: 1 [2]

花潮论坛's Archiver