荒羽 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2023-7-26 20:30

荒羽

马黑黑 发表于 2023-7-26 20:32

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

<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 = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
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>

红影发表于 2023-7-26 20:38

这个可以配置歌词颜色和进度条及频谱的相关信息。这个打开能直接展示频谱呢。黑黑又一个上传后的封装效果{:4_199:}

红影发表于 2023-7-26 20:40

黑黑辛苦了。这已经是第四个封装了吧{:4_187:}

马黑黑 发表于 2023-7-26 20:42

论坛里使用本系列插件，均需将插件的配置代码放在 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:43

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

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

马黑黑 发表于 2023-7-26 20:44

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

没有统计，随意做做改改

醉美水芙蓉 发表于 2023-7-26 21:14

马黑黑 发表于 2023-7-26 22:22

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

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

醉美水芙蓉 发表于 2023-7-26 22:30

马黑黑 发表于 2023-7-26 23:24

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

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

https://emojixd.com/

醉美水芙蓉 发表于 2023-7-27 00:03

马黑黑 发表于 2023-7-27 07:45

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

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

https://support.microsoft.com/zh-cn/topic/windows-7-%E5%92%8C-windows-server-2008-r2-%E4%B8%AD-segoe-ui-%E7%AC%A6%E5%8F%B7%E5%AD%97%E4%BD%93%E7%9A%84%E6%9B%B4%E6%96%B0%E5%8F%AF%E7%94%A8-0743a473-3afe-e8b2-7c20-54aa430463d6

山里人 发表于 2023-7-27 09:23

非常喜欢，谢谢分享

红影发表于 2023-7-27 09:57

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

现在看着觉得很好呢{:4_187:}

花飞飞 发表于 2023-7-27 10:06

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

马黑黑 发表于 2023-7-27 12:10

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

感谢美学家的谬赞{:4_170:}

马黑黑 发表于 2023-7-27 12:10

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

中午好 {:4_190:}

马黑黑 发表于 2023-7-27 12:11

红影发表于 2023-7-27 09:57
现在看着觉得很好呢
感谢管管的支持

花飞飞 发表于 2023-7-27 19:26

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

这是虔诚的观众的诚赞{:4_173:}

页: [1] 2 3 4

花潮论坛's Archiver

荒羽