午后・时光

荒羽(封装带进度条的小圆头频谱代码)

位置: 首页 > 黑氏代码[ 发布时间: 2023.7.27  作者: 马黑黑  阅读: 189 ]
  1. <style>
  2. #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; }
  3. #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; }
  4. #mydiv::after { --delay: -15s; }
  5. @keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }
  6. </style>

  7. <div id="mydiv"></div>
  8. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1956786377" autoplay loop></audio>

  9. <script>
  10. let script = document.createElement('script');
  11. script.src = 'https://638183.freep.cn/638183/web/api/pinpu_lrc.js';
  12. document.head.appendChild(script);

  13. (function() {
  14.     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] ];
  15.     window.onload = () => {
  16.         HCPlayer({
  17.             papa: '#mydiv',
  18.             lrcAr: lrcAr,
  19.             lrc_css: 'right: 15px; top: 10px; --bg: linear-gradient(orange,red);',
  20.             player_css: 'right: 15px; bottom: 10px; --track: #eee; --prog: red; --cap: silver;',
  21.             pinpu: {num: 100, width: 3, height: 160, color: 'linear-gradient(to top, orange, red)'}
  22.         });
  23.     };
  24. })();
  25. </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 的值要用引号包含起来。


前一篇: 无罔(圆形直条&斜条频谱封装代码)
下一篇: 原罪(细线进度条及小圆播封装代码)

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com