论坛 › 马黑黑教程专版 › 《落羽生花》对31号插件的配置说明

马黑黑 发表于 2022-12-12 13:30

《落羽生花》对31号插件的配置说明

本帖最后由 马黑黑 于 2022-12-12 13:36 编辑

该帖子没有改动31插件任何内容，完全是在它的基础上进行应用开发。先解释一下常规配置：

      HCPlayer({
                ypData: ypData,
                lrcAr: [],
                player_css: '--color1: hsl(30,100%,50%); --color2: hsla(0,0%,100%,0.15); --ww: 50%; align-items: center; bottom: 5px;',
                lrc_css: '',
      });


该插件提供五个可配置参数，帖子用了四个。起初只想用三个参数，因为想挪一下lrc歌词盒子的位置，写上了 lrc_css 和设置值，又觉得不好，就把值去掉，留个空字串测试一下空字串对插件有没有影响（30号以前的插件都会有影响）。另一个参数，pinpu，设置频谱条的长度和间距，pinpu: {size: 4, gap: 2,},，没有用上，采用了插件的默认设置，特此说明。

ypData 参数 使用事先声明的声波数组；

lrcAr 参数直接声明。本帖没有歌词，所以数组很短，就一个帖子标题。留意数组的格式，它是二维数组，所以必须写成: [], 头尾 “[]”是数组的父维，里边的“[]”是子数组元素——该子数组元素是一个个数组，里边的内容结构为 3,"文本",4 。

player_css 参数帖子设置了五个内容：

①② CSS变量 --color1 和 --color2，它是频谱条的头尾两个颜色，这两个颜色插件使用它们通过线性渐变设置频谱条的样式；
③ --ww，也是CSS变量，设定频谱父元素也就是整个频谱的总宽度（还可以配置 --hh 定义频谱高度）；
④ CSS属性 align-items，插件默认是 flex-end，设置频谱条固定于父元素mplayer的底部，帖子设置为 center，将频谱条固定于mplayer父元素垂直方向的中间——这是帖子频谱上下运行的关键所在。

⑤ CSS属性 bottom，设置频谱里父元素 papa 的底部多少距离。水平方向不用设置，因为papa已经设为子元素水平居中。

以上常规设置，还不能完成帖子频谱最终样式的目的，需要在常规设置之外找办法。大家已经看到，频谱条两头是尖的，这是怎么做到的？这是非常规设置：

如果分析过插件代码，可以知道插件频谱条对应的CSS盒子是 .mLine，为此，一个巧妙的做法（之一）是在帖子的CSS代码部分通过对 .mLine 的伪类进行定义来实现向 .mLine 添加新的样式。帖子这么操作：

<style>
#papa { /* 略 */ }
.mLine:nth-of-type(odd), .mLine:nth-of-type(even) {
      background: linear-gradient(to top, var(--color2),var(--color1),var(--color2));
      border-radius: 100%;
}
/* 定义奇数位不同的颜色 */
/*.mLine:nth-of-type(odd) { --color1: hsl(30,90%,40%); }*/
</style>


帖子给 .mLine 的伪类 nth-of-type，奇数（odd）和偶数（even）的，都设定了相同的两个CSS属性，background 和 border-radius，前者是背景色，使用线性渐变把 --color1 和 --color2 重新排列，后者设置频谱条圆角为100%（得出尖头状效果）。

如果需要频谱条间隔色差，则按上边给出的设置样式操作 odd 和 even 中的其中一个便可。

以上的非常规设置属高级设置，需要熟练掌握CSS知识才能自主操作。实际上，也可以通过JS完成上述高级设置工作。

先谈这些，有什么没谈到或没谈好的，将会根据互动情况补充。

马黑黑 发表于 2022-12-12 13:31

附：帖子地址
落羽生花 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

梦缘 发表于 2022-12-12 14:40

感谢老师的代码分享，问好！{:4_190:}

红影 发表于 2022-12-12 14:57

31号还可以这样修饰，学习了{:4_187:}

红影 发表于 2022-12-12 14:59

后者设置频谱条圆角为100%（得出尖头状效果）。这个没看懂，100%就是没有圆角啊，怎么会有尖头。哦不对，我记错了，应该是0%没有圆角吧{:4_173:}

红影 发表于 2022-12-12 15:02

弄了这么多接口，黑黑真细心，给了大家非常多的自由度{:4_187:}

红影 发表于 2022-12-12 15:04

关于频谱的上下运行，黑黑在获取本地波形数据的那个帖子里就已经设置过了呢{:4_173:}

马黑黑 发表于 2022-12-12 17:17

红影 发表于 2022-12-12 15:04
关于频谱的上下运行，黑黑在获取本地波形数据的那个帖子里就已经设置过了呢

是的，但用31号插件则是另一码事

马黑黑 发表于 2022-12-12 17:17

梦缘 发表于 2022-12-12 14:40
感谢老师的代码分享，问好！

{:4_190:}

马黑黑 发表于 2022-12-12 17:17

红影 发表于 2022-12-12 14:57
31号还可以这样修饰，学习了

{:4_191:}

马黑黑 发表于 2022-12-12 17:18

红影 发表于 2022-12-12 15:02
弄了这么多接口，黑黑真细心，给了大家非常多的自由度

接口其实是有限的，只是，像CSS这些，很多是通用的

马黑黑 发表于 2022-12-12 17:21

红影 发表于 2022-12-12 14:59
后者设置频谱条圆角为100%（得出尖头状效果）。这个没看懂，100%就是没有圆角啊，怎么会有尖头。哦不对，我 ...
border-radius很奇妙的，用百分比时，50%和100%并不一样，你可以尝试一下。

用 实际单位值，如px，设盒子高宽一样，都是300px，则 150px 的border-radius设置会的圆形，就是说角是圆角，50%也是，但100%、0 100%呢？
还有，当盒子宽高不一样时，情况又怎么样？

试一下就知道。

小辣椒 发表于 2022-12-12 18:21

马黑黑 发表于 2022-12-12 13:31
附：帖子地址
落羽生花 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

刚看见了很漂亮的频谱

小辣椒 发表于 2022-12-12 18:22

晚上再仔细看看，黑黑辛苦了{:4_187:}

马黑黑 发表于 2022-12-12 19:14

小辣椒 发表于 2022-12-12 18:22
晚上再仔细看看，黑黑辛苦了

{:4_191:}

马黑黑 发表于 2022-12-12 19:14

小辣椒 发表于 2022-12-12 18:21
刚看见了很漂亮的频谱

感谢支持

红影 发表于 2022-12-12 20:13

马黑黑 发表于 2022-12-12 17:17
是的，但用31号插件则是另一码事

嗯，两个不一样的。

红影 发表于 2022-12-12 20:15

马黑黑 发表于 2022-12-12 17:18
接口其实是有限的，只是，像CSS这些，很多是通用的

这样已经很不少了，几乎都是可调的了呢。

红影 发表于 2022-12-12 20:17

马黑黑 发表于 2022-12-12 17:21
border-radius很奇妙的，用百分比时，50%和100%并不一样，你可以尝试一下。

用 实际单位值，如px，设 ...

嗯嗯，我去试试。。。

马黑黑 发表于 2022-12-12 20:30

红影 发表于 2022-12-12 20:17
嗯嗯，我去试试。。。

好

查看完整版本: 《落羽生花》对31号插件的配置说明