|
本帖测试新做的canvas播放器，帖子代码如下：
<style>
#mydiv { margin: 20px 0 20px calc(50% - 602px); 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">
<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);
}
//播放器配置
var colors = {track: 'pink', prog: 'white', lrc1: 'snow', lrc2: 'darkred'};
var lrcAr = [ [2.00,"刀郎 - 未来的底片",13.7], [15.50," 昨日犹似羽衣舞 今朝北邙狐兔窟",17.0], [36.65," 当天空依旧愁云山雨欲来",3.4], [40.00," 岩洞里阴冷潮湿没有火的照应",5.5], [49.5," 这样的天气这样的日子里",3.8], [53.25," 狐狸还只是无法对映的光景",4.4], [61.55," 所有的需要都只是身体的需要",3.8], [65.33," 意义仅仅是孤简的风干的粮草",4.0], [70.08," 走过了蛮荒的高原去往成熟的麦田",5.0], [75.15," 这世界我们来去轮转像一个圈套",5.2], [80.77," 就在这反复不倦的身体里面",3.4], [84.18," 一片片预言一把把刀镰",3.1], [87.24," 不停地劈开人群预定的交换",4.3], [102.91," 西风飒飒依旧冷 潭水时而清澈时而浑",6.9], [109.96," 在梦里贡献着一列列愉悦单据的人们",4.9], [114.84," 把镜中的月水中的花墙上的遗志笔下的七魄三魂",6.3], [121.18," 打印成点阵清晰黑白分明的年轮",4.7], [126.28," 在村头金黄的麦地雄伟的石狮守护老爷的厚道",6.6], [133.44," 一对对锄头在反复地耕耘里换成了枪炮",6.1], [139.56," 狐狸已经出现在地主家的书简吞尽了狼烟",5.1], [144.62," 逍遥地在穹顶大地留白间写下这一道一道的符号",8.0], [182.73," 城邦的狐狸在桃欢柳笑",4.6], [187.34," 意义的幻境来自未来的妖",3.1], [190.43," 重现在虚拟的一零一零一零幺",2.9], [193.32," 历史照着镜子 成长在反复叙事",4.1], [197.45," 预言在屏幕里交换的全都是模板的样式",4.4], [201.8," 在霓虹闪烁的高楼循环的快感滋养未来的符号",6.2], [207.96," 灵魂在重启的账户的路径里不停地哀嚎",6.0], [214.3," 狐狸还在祷告在止于黑的拂晓昼夜地舞蹈",5.7], [219.99," 追逐使无为的生存变得需要",3.4], [223.42," 在意义里无谓地骄傲",2.4], [225.79," 在止于黑的拂晓",3] ];
</script>
|
发表于 2024-5-17 13:07
