路过人间-郁可唯 （学习老黑“童安格”制作）
本帖最后由 加林森 于 2022-8-26 18:15 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: gray url('https://pic.imgdb.cn/item/63084d0016f2c2beb1bb7f4f.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>
<img id="mypic" src="https://pic.imgdb.cn/item/63083f1e16f2c2beb1b4605b.jpg" alt="" />
</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: '#0eb83a', time: '#00bc12', track: '#ccc', prg: 'red', circle: '#0eb83a', btn: 'snow', btnhover: 'red' };
aud = new Audio();
let lrcAr = [
['1.87','路过人间-郁可唯'],
['37.44','嘿 意不意外'],
['42.27','她背影 那么轻快'],
['52.64','嘿 要明白'],
['58.99','人会来就会离开'],
['66.22','世上唯一不变 是人都善变'],
['71.30','路过人间 爱都有 期限'],
['74.75','天可怜见 心碎在所难免'],
['81.05','以为痛过几回 多了些修炼'],
['85.87','路过人间 就懂得防卫'],
['89.20','说来惭愧 人只要有机会'],
['95.47','就又沦陷'],
['111.68','嘿 别再猜'],
['118.01','她可曾 想过回来'],
['124.94','嘿 醒过来'],
['128.30','你很好 她也不坏'],
['140.09','快快抹干眼泪 看昙花多美'],
['145.29','路过人间 无非一瞬间'],
['148.30','每段并肩 都不过是擦肩'],
['154.84','曾经辜负哪位 这才被亏欠'],
['159.51','路过人间 一直这轮回'],
['163.00','幸运一点 也许最后和谁'],
['169.45','都不相欠'],
['173.36','都不相欠'],
['176.95','都不相欠'],
['177.95','lrc制作:加林森 '],
['213.93','人对爱和永远 应该有幻觉'],
['218.61','路过人间 也才几十年'],
['222.22','却为了爱 勇于蹉跎岁月'],
['229.62','相遇离别 贪嗔爱痴怨'],
['233.35','路过人间 就忙着这些'],
['236.91','谁有意见 莫非是心里面'],
['243.38','渺无人烟'],
['247.81','无人可恋'],
['258.64','来这人间'],
['266.01','有多浪费'],
['268.01','谢谢欣赏']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=1888915574.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>
@马黑黑 ，这个是我用PS制作的，不知道行不？ 加林森 发表于 2022-8-26 12:35
@马黑黑 ，这个是我用PS制作的，不知道行不？
没有不行的 马黑黑 发表于 2022-8-26 12:41
没有不行的
嗯嗯，谢谢你！{:4_190:} 优选了两位大美人啊！{:4_172:} 队长这个是黑黑新的分享？ 队长速度快的，图图也是漂亮{:4_178:} 小辣椒 发表于 2022-8-26 15:04
队长这个是黑黑新的分享？
是啊 小辣椒 发表于 2022-8-26 15:14
队长速度快的，图图也是漂亮
我用PS制作的。 加林森 发表于 2022-8-26 15:23
我用PS制作的。
图图有进步{:4_199:}； 小辣椒 发表于 2022-8-26 15:30
图图有进步；
嗯嗯，还在继续学习。 队长真快，欣赏队长好帖{:4_187:} 红影 发表于 2022-8-26 17:04
队长真快，欣赏队长好帖
谢谢鸿影！{:4_204:} 制作精美，赞一个呢。。。。音乐没有听懂。。。 青青子衿 发表于 2022-8-26 17:33
制作精美，赞一个呢。。。。音乐没有听懂。。。
路过人间，就是来来去去的。 自己来欣赏！ 加林森 发表于 2022-8-26 17:14
谢谢鸿影！
队长都错第二遍啦，我是红影，不是鸿影呢。或者直接叫我影子吧，不容易打错字{:4_173:} 红影 发表于 2022-8-26 20:14
队长都错第二遍啦，我是红影，不是鸿影呢。或者直接叫我影子吧，不容易打错字
对不起了，老了眼睛不对了！ 小辣椒 发表于 2022-8-26 15:14
队长速度快的，图图也是漂亮
谢谢！
页:
[1]
2