本帖最后由 马黑黑 于 2024-5-18 19:32 编辑
代码
<style>
#mydiv { margin: 20px 0 20px calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/2/wlddp.jpg') no-repeat center/cover; overflow: hidden; border: 1px solid gray; position: relative; }
#player { position: absolute; bottom: 0; }
#lrc { position: absolute; top: 20px; }
li-zi { position: absolute; width: 20px; height: 20px; background: purple; }
@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">
<!-- 两个canvas各司其职,id唯一,尺寸自设,布局定位使用CSS设置; audio id唯一 -->
<audio id="aud" src="https://file.uhsea.com/2405/97ee0ea9b4ad516c0d84543c7dacf3eeFV.mp3" autoplay loop></audio>
<canvas id="player" width="460" 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);
//html粒子
var all = 120;
for(var i = 0; i < all; i++) {
var lz = document.createElement('li-zi');
var hudu = Math.PI / 180 * 360 / all * i;
var xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
var size = Math.random() * 15 + 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);
}
//播放器配置 track - 进度条底色; prog - 进度条、滑块、文本颜色; lrc1、lrc2 - 歌词渐变色
var colors = {track: 'pink', prog: 'white', lrc1: 'snow', lrc2: 'darkred'};
//歌词 lrcAr 名称唯一
var lrcAr = [ [2.00,"刀郎 - 未来的底片",6], [8.42,"……",2.4], [225.79,"在止于黑的拂晓",3] ];
</script>
|