荒羽(封装带进度条的小圆头频谱代码)
- <style>
- #mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/webp1/hlyu.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
- #mydiv::before,#mydiv::after { position: absolute; left: 0px; top: 0px; content: '1FAB6'; offset-path: path('M-20,-20 L1024,700'); font-size: 40px; animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }
- #mydiv::after { --delay: -15s; }
- @keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }
- </style>
- <div id="mydiv"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1956786377" autoplay loop></audio>
- <script>
- let script = document.createElement('script');
- script.src = 'https://638183.freep.cn/638183/web/api/pinpu_lrc.js';
- document.head.appendChild(script);
- (function() {
- let lrcAr = [ [2,"詹雯婷 - 荒羽",16.0], [18.03,"作词:羊炯秋 作曲:文颖秋",5.0], [23.04,"拂晓前 昏暗的视线",5.0], [28.04,"倾倒的世界 任黑暗蔓延",6.0], [34.08,"一片片 链刃在复现",5.6], [40.04,"漫天的炽焰 舞着那危险",6.0], [46.05,"雷鸣一乍地动山摇",3.0], [49.04,"鹰爪掠过掀起暗潮",3.0], [52.03,"执链乘风划破云霄",3.0], [55,"盘过半空傲气萦绕",2.1], [57.09,"逆水寒夜月光知晓",3.0], [60.09,"从不深陷失意泥沼",3.0], [63.06,"在希望的间隙熠耀",3.0], [66.04,"威严般 荒羽出鞘",3.0], [69.02,"黄沙呼啸 烽烟咆哮",5.0], [74.07,"于群峰之巅 驰鹰过人间",3.0], [77.05,"我化茧舞链 拨开迷雾浓烟",3.0], [80.06,"雷鸣呼召 无畏路遥",6.0], [86.01,"睥睨天地间 傲骨拂尘念",3.0], [89,"盛世的画卷 倒映未完的诗篇",3.4], [94.07,"拂晓前 昏暗的视线",5.0], [99.06,"倾倒的世界 任黑暗蔓延",6.1], [106.01,"一片片 链刃在复现",5.0], [111.02,"漫天的炽焰 舞着那危险",6.0], [117.07,"雷鸣一乍地动山摇",3.0], [120.07,"鹰爪掠过掀起暗潮",3.0], [123.05,"执链乘风划破云霄",3.0], [126.03,"盘过半空傲气萦绕",3.0], [129.02,"逆水寒夜月光知晓",2.1], [131.1,"从不深陷失意泥沼",3.0], [134.08,"在希望的间隙熠耀",3.0], [137.07,"威严般 荒羽出鞘",3.0], [140.06,"黄沙呼啸 烽烟咆哮",5.9], [146,"于群峰之巅 驰鹰过人间",2.1], [148.08,"我化茧舞链 拨开迷雾浓烟",3.0], [151.09,"雷鸣呼召 无畏路遥",6.0], [157.05,"睥睨天地间 傲骨拂尘念",3.0], [160.03,"盛世的画卷 倒映未完的诗篇",4.2], [175.01,"执念下的誓言",2.1], [177.08,"这不朽的信念",3.0], [180.06,"要世界听见",3.0], [183.06,"我站在 傲世云巅",3.0], [186.04,"黄沙呼啸 烽烟咆哮",5.0], [191.08,"于群峰之巅 驰鹰过人间",3.0], [194.06,"我化茧舞链 拨开迷雾浓烟",3.0], [197.09,"雷鸣呼召 无畏路遥",5.9], [203.01,"睥睨天地间 傲骨拂尘念",3.0], [206.01,"盛世的画卷 倒映未完的诗篇",4.2] ];
- window.onload = () => {
- HCPlayer({
- papa: '#mydiv',
- lrcAr: lrcAr,
- lrc_css: 'right: 15px; top: 10px; --bg: linear-gradient(orange,red);',
- player_css: 'right: 15px; bottom: 10px; --track: #eee; --prog: red; --cap: silver;',
- pinpu: {num: 100, width: 3, height: 160, color: 'linear-gradient(to top, orange, red)'}
- });
- };
- })();
- </script>
-----------------------------------------------------------------------------------------------------------------------------------------
论坛里使用本系列插件,均需将插件的配置代码放在 window.onload {} 代码块中:
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'right: 15px; top: 10px; --bg: linear-gradient(orange,red);',
player_css: 'right: 15px; bottom: 10px; --track: #eee; --prog: red; --cap: silver;',
pinpu: {num: 100, width: 3, height: 160, color: 'linear-gradient(to top, orange, red)'}
});
};
共 6 个参数,前面三个不单独讲了,和之前的插件是一样的。
player_css 参数新增一个CSS变量 --cap ,缺省时是 snow(snow);--track 和 --prog 变量基于进度条,和之前的插件也是有延续性的。
pinpu 参数,以JS对象存储配置,num 是频谱条数,width 是频谱条宽度,height 是频谱条高度,各键值对以逗号隔开;color 是频谱条颜色,缺省时随机获取颜色、每一条都可能不一样,设置后按设置值渲染颜色,注意,color 的值要用引号包含起来。
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'right: 15px; top: 10px; --bg: linear-gradient(orange,red);',
player_css: 'right: 15px; bottom: 10px; --track: #eee; --prog: red; --cap: silver;',
pinpu: {num: 100, width: 3, height: 160, color: 'linear-gradient(to top, orange, red)'}
});
};
共 6 个参数,前面三个不单独讲了,和之前的插件是一样的。
player_css 参数新增一个CSS变量 --cap ,缺省时是 snow(snow);--track 和 --prog 变量基于进度条,和之前的插件也是有延续性的。
pinpu 参数,以JS对象存储配置,num 是频谱条数,width 是频谱条宽度,height 是频谱条高度,各键值对以逗号隔开;color 是频谱条颜色,缺省时随机获取颜色、每一条都可能不一样,设置后按设置值渲染颜色,注意,color 的值要用引号包含起来。
前一篇: 无罔(圆形直条&斜条频谱封装代码)
下一篇: 原罪(细线进度条及小圆播封装代码)
发表评论:
评论列表 [0条]