学习套用黑黑（测试新开发canvas播放器）
<style>#mydiv { margin: 150px 0 20px calc(50% - 781px); display: grid; place-items: center; width: 1383px; height: 744px; background: url('https://wj.zp68.com/lxx/yunhua/2022/08/06/9IF.gif') no-repeat center/cover; overflow: hidden; border: 1px solid gray; z-index: 1; position: relative; }
#player { position: absolute; bottom: 20px; }
#lrc { position: absolute; left: -100px; top: 40px; }
li-zi { position: absolute; width: 10px; height: 10px;background: Lavender; }
@keyframes moving { from { opacity: 0; transform: rotate(0) translate(0,0); } to { opacity: 1; transform: rotate(180deg) translate(var(--x0),var(--y0)); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://wj1.zp68.com:812/lxx/yy/jywm.mp3" autoplay loop></audio>
<canvas id="player" width="600" height="80"></canvas>
<canvas id="lrc" width="800" height="50"></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_player.js';
document.body.appendChild(sF);
var all = 100;
for(var i = 0; i < all; i++) {
var lz = document.createElement('li-zi');
var hudu = Math.PI / 180 * 360 / all * i;
var xx = 300 * Math.cos(hudu), yy = 300 * Math.sin(hudu);
var size = Math.random() * 10 + 5;
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
width: ${size}px;
height: ${size}px;
animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
`;
mydiv.prepend(lz);
}
var colors = {track: 'Azure', prog: 'LightGreen', lrc1: 'snow', lrc2: 'Green'};
var lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> @马黑黑
黑黑，这个播放器感觉以前很早就相似的，还没有去找，但现在的精致，特别进度条精细，特别的喜欢
现在的代码简约，而且你都设置好的，无论播放器和歌词同步，都可以自由变换自己喜欢的颜色，和调节位置
粒子发现小方块的有立体感，比小圆的漂亮，看了代码这个套用非常的方便，就是新手也是可以玩的
感谢黑黑精彩的播放器分享
都是现成的音乐和图图就为测试一下看看效果，就是歌词同步不一样不是逐字逐句出来，其他感觉挺好，不过可能我没有吃透你的代码，没有做其他的变化效果。感觉这样也是挺方便可以秒做{:4_170:} 欣赏老师的佳作，上午好！
把粒子半径改小了也挺有趣了，形成了圆球形状了呢。
这个背景图特别漂亮。欣赏亲爱的好帖{:4_199:} 以前音画帖用flash做特效，现在不用flash也可做得很漂亮。 小辣椒 发表于 2024-5-18 10:02
@马黑黑
黑黑，这个播放器感觉以前很早就相似的，还没有去找，但现在的精致，特别进度条精细，特别的喜 ...
我刚试了一下，粒子可以改成图片的。{:4_199:} 小辣椒你这贴子太漂亮了。
动感十足，有烟花有舞蹈，跟这个粒子的效果绝搭。。{:4_187:} 哇，你的歌词颜色改成功了，我刚试了不成，我得再试看一下{:4_199:}{:4_170:} 小辣椒 发表于 2024-5-18 10:02
@马黑黑
黑黑，这个播放器感觉以前很早就相似的，还没有去找，但现在的精致，特别进度条精细，特别的喜 ...
设计理念是差不多的，只是实现手段不同 南无月 发表于 2024-5-18 17:29
我刚试了一下，粒子可以改成图片的。
这个我没有试，这个圆的方块的粒子有立体感也是不错的{:4_173:} 马黑黑 发表于 2024-5-18 19:26
设计理念是差不多的，只是实现手段不同
现在的代码越来越简洁，而效果越来越多 南无月 发表于 2024-5-18 17:31
哇，你的歌词颜色改成功了，我刚试了不成，我得再试看一下
这个颜色黑黑有说明的，不用动脑子就看看黑黑的代码说明就可以了 南无月 发表于 2024-5-18 17:31
小辣椒你这贴子太漂亮了。
动感十足，有烟花有舞蹈，跟这个粒子的效果绝搭。。
一直喜欢这首歌，以前是配这个图，就一起用上去了 起个网名好难 发表于 2024-5-18 15:58
以前音画帖用flash做特效，现在不用flash也可做得很漂亮。
是啊，现在的swf看不见了，许多精彩的效果都冷冻了，以前我就玩的swf播放器，画面很漂亮的，现在我都看不见了{:4_198:} 红影 发表于 2024-5-18 11:35
把粒子半径改小了也挺有趣了，形成了圆球形状了呢。
这个背景图特别漂亮。欣赏亲爱的好帖
亲爱的，只是想快速完成一下这个播放器作业，就用了现成的图图和歌曲 老谟深虑 发表于 2024-5-18 10:47
欣赏老师的佳作，上午好！
问好老谟，谢谢欣赏{:4_187:} 小辣椒 发表于 2024-5-18 20:28
现在的代码越来越简洁，而效果越来越多
这是个准插件，严格来讲不是插件，它实际上就是独立出去的帖子JS代码 小辣椒 发表于 2024-5-18 20:33
亲爱的，只是想快速完成一下这个播放器作业，就用了现成的图图和歌曲
效果好就好啊{:4_187:} 小辣椒 发表于 2024-5-18 20:30
一直喜欢这首歌，以前是配这个图，就一起用上去了
相当好看。效果超好。{:4_199:}