【阿依莫】响应式圆环频谱(解说)
(二)参数及解释:共5个,均省略
1、lrcAr : 同步歌词数组;
2、ypData : 音乐波形数据数组,须自行制作,本坛提供有制作工具。它是频谱响应歌曲律动的依据;
3、lrc_css : 基于歌词位置与颜色的CSS设置。常规属性 left、top 等用于定位、color 用于设置歌词底色,变量 --bg 用于 设置同步颜色;
4、player_css : 设置播放控制器参数。一是可用 left、top 等CSS属性定位,二是提供两个CSS变量 ① --color1 - 用于设置文本和圆环的颜色,② -color2 - 用于设置频谱条上下颜色;
5、pinpu : 频谱相关。需要一个对象,例如,{size: 2, gap: 2} ,目前就提供两个参数,size 指频谱条的宽度,gap 指频谱条间距。
(三)参数配置举例
(function() {
//插件代码 略
//歌词数组代码 略 let lrcAr = [[...]];
//歌曲波形数据代码 略 let ypData = [...];
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
lrc_css: '',
player_css: '--color1: orange; --color2: gold; left: 40px;',
pinpu: {size: 2, gap: 1,},
});
})();
1、lrcAr : 同步歌词数组;
2、ypData : 音乐波形数据数组,须自行制作,本坛提供有制作工具。它是频谱响应歌曲律动的依据;
3、lrc_css : 基于歌词位置与颜色的CSS设置。常规属性 left、top 等用于定位、color 用于设置歌词底色,变量 --bg 用于 设置同步颜色;
4、player_css : 设置播放控制器参数。一是可用 left、top 等CSS属性定位,二是提供两个CSS变量 ① --color1 - 用于设置文本和圆环的颜色,② -color2 - 用于设置频谱条上下颜色;
5、pinpu : 频谱相关。需要一个对象,例如,{size: 2, gap: 2} ,目前就提供两个参数,size 指频谱条的宽度,gap 指频谱条间距。
(三)参数配置举例
(function() {
//插件代码 略
//歌词数组代码 略 let lrcAr = [[...]];
//歌曲波形数据代码 略 let ypData = [...];
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
lrc_css: '',
player_css: '--color1: orange; --color2: gold; left: 40px;',
pinpu: {size: 2, gap: 1,},
});
})();
前一篇: 十三、在帖子中使用视频媒体
下一篇: 小白也做音频播放控制器
发表评论:
评论列表 [0条]