|
|

楼主 |
发表于 2022-12-9 11:53
|
显示全部楼层
帖子模板
- <style>
- #papa { margin: 0 0 0 calc(50% - 583px); width: 1024px; height: 640px; background: linear-gradient(to bottom right,tan,black); box-shadow: 3px 6px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
- .mLine::before { position: absolute; content: ''; width: 100%; height:4px; background: orange; top: -6px; }
- </style>
- <div id="papa">
- <!-- 帖子代码 -->
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27672422.mp3" loop autoplay></audio>
- <script>
- (function() {
- /* 插件代码 略*/
- /* 音波数据 let ypData = [0,0,100,...];*/
-
- /* 插件配置 */
- HCPlayer({
- ypData: ypData,
- player_css: '--ww: 50%; --hh: 200px; --pinpu: linear-gradient(to top,black,lightblue); align-items: flex-end;',
- });
- })();
- </script>
复制代码 如果使用默认值,所有插件配置参数可以不要,调用插件写成:
HCPlayer({});
需要自定义配置,则:
一、ypData 参数
在配置代码的上方给出 ypData 数组,它是你获取的音乐的波形数据。代码是这样(不能有省略号,这里是表示还有很多):
let ypData = [0,120,30,...];
然后配置插件参数:
HCPlayer({
ypData: ypData,
});
二、player_css 参数
此参数可配置:
① 频谱父容器的宽高尺寸: --ww 是宽度,--hh 是高度。--hh 会影响频谱的活动范围,如果设置,一般建议在 200px 上下。
② 频谱颜色:--pinpu 变量只能接受线性渐变,举例,--pinpu: linear-gradient(to top,black,lightblue); 渐变颜色至少两个,多不限。
③ 频谱垂直定位:可添加 align-items 属性设定频谱垂直运行方向,默认底边固定,如果需要垂直居中、上下运行,添加代码:align-items: flex-end;
player_css 配置举例:
HCPlayer({
ypData: ypData,
player_css: '--ww: 50%; --hh: 200px; --pinpu: linear-gradient(to top,black,lightblue); align-items: flex-end;',
});
|
评分
-
| 参与人数 3 | 威望 +100 |
金钱 +260 |
经验 +100 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
上海朝阳
| |
+ 60 |
|
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|