荒羽

马黑黑

马黑黑

本帖测试带进度条的频谱插件：

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. 
   
8. <div id="mydiv"></div>
   
9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1956786377" autoplay loop></audio>
   
10. 
    
11. <script>
    
12. let script = document.createElement('script');
    
13. script.src = 'https://638183.freep.cn/638183/web/api/pinpu_lrc.js';
    
14. document.head.appendChild(script);
    
15. 
    
16. (function() {
    
17.     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] ];
    
18.     window.onload = () => {
    
19.         HCPlayer({
    
20.             papa: '#mydiv',
    
21.             lrcAr: lrcAr,
    
22.             lrc_css: 'right: 15px; top: 10px; --bg: linear-gradient(orange,red);',
    
23.             player_css: 'right: 15px; bottom: 10px; --track: #eee; --prog: red; --cap: silver;',
    
24.             pinpu: {num: 100, width: 3, height: 160, color: 'linear-gradient(to top, orange, red)'}
    
25.         });
    
26.     };
    
27. })();
    
28. </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 的值要用引号包含起来。

马黑黑

红影 发表于 2023-7-26 20:38
这个可以配置歌词颜色和进度条及频谱的相关信息。这个打开能直接展示频谱呢。黑黑又一个上传后的封装效果{: ...

其它插件也基本可以设置各种属性，有一些可能有缺陷，会根据使用情况进行调整

马黑黑

红影 发表于 2023-7-26 20:40
黑黑辛苦了。这已经是第四个封装了吧

没有统计，随意做做改改

马黑黑

醉美水芙蓉 发表于 2023-7-26 21:14
手机正常，电脑频谱歌词正常，就是羽毛为啥只能看见□飘动呀？

羽毛是用了 Emoji 图标，道理上，较新的系统不会无法显示

马黑黑

醉美水芙蓉 发表于 2023-7-26 22:30
原来还是系统问题！老师说我电脑系统需要更新了？

我不是很清楚。不过，win7是经典的，你先去看看 Emoji 网站，看看里面的文本图标能否正常显示：

https://emojixd.com/

马黑黑

醉美水芙蓉 发表于 2023-7-27 00:03
我的一个帖子测试乌龟赛跑我能看到，这个怎么又看不见了呢？

具体不清楚。win7下，要能完美显示Emoji，你需要微软为用户准备的字库，请参照官网：

https://support.microsoft.com/zh ... 2-7c20-54aa430463d6

山里人

非常喜欢，谢谢分享

红影

马黑黑 发表于 2023-7-26 20:43
其它插件也基本可以设置各种属性，有一些可能有缺陷，会根据使用情况进行调整

现在看着觉得很好呢

花飞飞

画面美人十分特别，野性之美。橙红播放器颜色和歌词颜色是配套的，热烈欢快

马黑黑

花飞飞 发表于 2023-7-27 10:06
画面美人十分特别，野性之美。橙红播放器颜色和歌词颜色是配套的，热烈欢快

感谢美学家的谬赞

马黑黑

山里人 发表于 2023-7-27 09:23
非常喜欢，谢谢分享

中午好

马黑黑

红影 发表于 2023-7-27 09:57
现在看着觉得很好呢

感谢管管的支持

花飞飞

马黑黑 发表于 2023-7-27 12:10
感谢美学家的谬赞

这是虔诚的观众的诚赞