HCPlayer响应式插件汇总

插件简介

HCPlayer响应式插件在 HCPlayer插件 的基础上加入了响应音波的功能，提供可视化音频效果，要求播放页面与音频资源同源，若非同源则要求音频资源允许跨域。其引用、配置等操作和非响应式插件一脉相承。

如果跨域，请在 audio 标签中加入 crossorigin="anonymous"，crossorigin 属性值也可能是音频所在资源所提供的其他字串。

插件列表及配置举例

1、柱状简单频谱 查看效果

HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	fs_css: 'top: 100px;',
	player_css: `
		bottom: 0px;
		--ww: 400px; /* 总宽度 */
		--hh: 120px; /* 总高度 */
		--color1: purple; /* 频谱条主色 */
		--color2: white; /* 频谱条修饰色 */
	`,
	/* size: 频谱条宽，gap: 频谱间距，radColor: 0 或缺省 = --color1, 1 = 随机颜色 */
	pinpu: {size: 4, gap: 1, radColor: 1},
});

2、梳形柱状频谱 查看效果

HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	fs_css: 'top: 100px;',
		player_css: `
		bottom: 30px;
		--ww: 400px; /* 播放器宽度 */
		--hh: 120px; /* 播放器高度 */
		--color1: navy; /* 频谱条主色 + 文本色 */
		--color2: snow; /* 频谱条修饰色 +  进度条底色*/
	`,
	/* size: 频谱条宽，gap: 频谱间距 radColor: 0 = --color1, 1 = 随机 */
	pinpu: {size: 4, gap: 2, radColor: 0}
});

3、圆环斜频谱 查看效果

HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	fs_css: 'top: 100px;',
	player_css: `
		bottom: 70px;
		--color: yellow; /* 频谱修饰 + 文本颜色 */
		--len: 3px; /* 频谱条宽 */
	`,
	pinpu_num: 60, /* 频谱条总数 */
	pinpu_color: 'navy', /* 频谱条主色 缺省或空值取随机色 */
});

4、圆环正频谱 查看效果

HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	fs_css: 'top: 100px;',
	player_css: `
		bottom: 70px;
		--color: yellow; /* 频谱修饰 + 文本颜色 */
		--len: 3px; /* 频谱条宽 */
	`,
	pinpu_num: 60, /* 频谱条总数 */
	pinpu_color: 'navy', /* 频谱条主色 缺省或空值取随机色 */
});

5、示波状频谱 查看效果

HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	player_css: `
		bottom: 40px;
		color: #eee;
		--ww: 50%; /* 播放器宽度 */
		--hh: 80px; /* 播放器高度 */
	`,
		/* pinpu子对象：size，频谱条厚度；gap：频谱条间距;
		color1和2，参与渐变颜色，缺省或空值插件自取颜色值 */
	pinpu: {size: 2, gap: 0, color1: 'blue', color2: ''},
});

6、脚链频谱 查看效果

HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: `
		top: 20px;
		color: #eee;
		--bg: linear-gradient(rgba(10,10,100,.25),rgba(20,20,100,.5));
	`,
	fs_css: 'color: snow; background: navy; left: 10px; top: 10px;',
	player_css: `
		bottom: 30px;
		border-width: 0;
		color: red;
		--size: 200px; /* 播放器父元素宽高尺寸 */
		--bRad: 0 50%; /* 通过border-radius属性设置珠子形状 */
		--track: tan; /* 进度条底色 */
		--prog: magenta; /* 进度指示颜色 */
		--btnBg: linear-gradient(lime, red); /* 按钮背景（支持图片） */
	`,
	/* 珠子颜色，缺省或空值将由插件自行配置 */
	lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
});

待续……