负心的人（学习黑黑耶利亚女郎效果套用一个）
<style>
#papa { left: -204px; width: 1000px; height: 600px; top: 125px;box-shadow: 3px 3px 20px #000; background: gray url('https://pic.imgdb.cn/item/6308885c16f2c2beb1de3362.gif') no-repeat center/cover; position: relative; z-index: 1; }
#mypic { position: absolute; top: 125px; right: 100px; width: 100px; transform: rotate(30deg); cursor: pointer; transition: all 2s; }
#player { margin: auto; display: block; position: absolute; }
</style>
<div id="papa">
<canvas id="player"></canvas>
<img id="mypic" src="https://pic.imgdb.cn/item/6202081b2ab3f51d91d84579.gif" alt="" />
</div>
<script>
let ctx = player.getContext('2d'),
w = player.width = 1050, h = player.height = 600,
startX = 380, startY = 370, radius = 16,
flag = false,
color = { lrc: 'lightblue', time: 'lightblue', track: '#ccc', prg: 'red', circle: 'lightblue', btn: 'snow', btnhover: 'red' };
aud = new Audio();
let lrcAr = [
['0.00','负心的你--歌手：云南三怪'],
['9.95','帖赠：风中飞尘'],
['17.50','驻立在船头'],
['19.73','想挥挥我的手'],
['22.75','奈何气笛催你走'],
['28.51','冰冷的风雨是阵阵吹起'],
['34.21','随着那波涛声'],
['36.96','无情地落下去'],
['40.10','紧闭的双眼中'],
['43.14','想着你的情'],
['46.06','虽然你离去'],
['48.83','永远难忘记'],
['51.57','冰冷的风雨刺中我的心'],
['57.37','哎哟你呀你没良心'],
['63.45','汽笛声渐渐走'],
['65.94','我心也被带走'],
['68.78','风雨依然滴滴落'],
['73.30','看着你的背影消逝无踪'],
['80.70','喊也喊不停'],
['83.39','叫也叫不醒'],
['86.74','LRC编辑：小辣椒'],
['104.38','驻立在船头'],
['106.60','想挥挥我的手'],
['109.50','奈何气笛催你走'],
['115.38','冰冷的风雨是阵阵吹起'],
['121.04','随着那波涛声'],
['123.83','无情地落下去'],
['126.88','紧闭的双眼中'],
['130.06','想着你的情'],
['132.60','虽然你离去'],
['135.68','永远难忘记'],
['138.32','冰冷的风雨刺中我的心'],
['144.15','哎哟你呀你没良心'],
['150.21','汽笛声渐渐走'],
['152.77','我心也被带走'],
['155.64','风雨依然滴滴落'],
['161.18','看着你的背影消逝无踪'],
['167.26','喊也喊不停'],
['170.15','叫也叫不醒'],
['173.78','谢谢欣赏'],
['182.64','谢谢欣赏']
];
aud.src = 'https://wx.ttt.dj/data/nfs/mp3/3guai.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, 350);
ctx.save();
ctx.fillStyle = color.lrc;
ctx.textAlign = 'center';
ctx.beginPath();
ctx.font = '1.2em sans-serif';
ctx.fillText(text, w/2, 330);
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>
<br><br><br><br><br> @马黑黑
黑黑我又偷懒了，歌曲是昨天的 没有时间做歌词同步，就昨天的用了{:4_170:} 亲爱的背景还是频谱效果呢，真漂亮{:4_187:} 小辣椒 发表于 2022-8-26 20:19
@马黑黑
黑黑我又偷懒了，歌曲是昨天的
{:4_181:} 这个不是套用，只是使用了俺刚弄共享的播放器 红影 发表于 2022-8-26 20:21
亲爱的背景还是频谱效果呢，真漂亮
亲爱的我就岁月的小频谱做的图图 马黑黑 发表于 2022-8-26 20:21
求速度的{:4_170:} 马黑黑 发表于 2022-8-26 20:22
这个不是套用，只是使用了俺刚弄共享的播放器
反正是你的东东{:4_173:} 本帖最后由 加林森 于 2022-8-26 20:30 编辑
厉害厉害。又是粒子效果。{:4_199:} 加林森 发表于 2022-8-26 20:25
厉害厉害。又是粒子习惯。
队长晚上好{:4_187:} 小辣椒 发表于 2022-8-26 20:25
反正是你的东东
大家的 小辣椒 发表于 2022-8-26 20:24
求速度的
挺好挺好，这速度这质量，杠杠的 小辣椒 发表于 2022-8-26 20:26
队长晚上好
晚上好！ 马黑黑 发表于 2022-8-26 20:27
大家的
这个播放器应该说可以在画布了里面自由安放，黑黑设置的很好{:4_199:} 马黑黑 发表于 2022-8-26 20:28
挺好挺好，这速度这质量，杠杠的
哈哈，歌词同步花时间我偷懒了 马黑黑 发表于 2022-8-26 20:27
大家的
绝对是你的{:4_170:} 小辣椒 发表于 2022-8-26 20:44
绝对是你的
大家喜欢，俺才去多做一些 小辣椒 发表于 2022-8-26 20:44
哈哈，歌词同步花时间我偷懒了
{:4_203:} 小辣椒 发表于 2022-8-26 20:43
这个播放器应该说可以在画布了里面自由安放，黑黑设置的很好
本来就可以的
页:
[1]
2