网站首页 插件列表 关闭预览 回到顶部

HCPlayer插件汇总

插件简介

HCPlayer是花潮音频播放控制器插件，插件的开发旨在简化音画帖代码。一般地，每一个插件都封装有三大功能：播放控制器 + lrc歌词同步 + 全屏显示。

重要约定

使用HCPlayer系列插件，请确保页面上 audio 标签 id 为 aud：

<audio id="aud" src="音频地址" autoplay loop></audio>

此外，帖子主元素的CSS代码可以加入如下CSS变量值，以便帖子其它自主安排的关键帧动画可以利用此变量与插件的相关动画得到同步控制：

--state: running;

引用插件

方法一：

<script src='插件地址' charset='utf-8'></script>
<script>
	HCPlayer({
		/* 配置代码*/
	});
</script>

方法二：

<script>
	let script = document.createElement('script');
    script.src = '插件地址';
    script.charset = 'utf-8';
    document.head.appendChild(script);

    script.onload = () => {
	   	HCPlayer({
			/* 配置代码*/
		});
	};
</script>

此法适用于支持JS但不支持JS文件引用的环境，配置代码必须写在 script.onload = () => {}; 的代码块即花括号 {} 里。

插件通用配置

插件配置以对象的方式进行，HCPlayer 是关键字，语法结构为 HCPlayer({/* 配置代码 */}); ， 配置以键值对的方式写在花括号 {} 内，键值对之间用小角逗号 , 分隔，每一个键值对的键值，即冒号后面的值，除非是以子对象方式组织键值对，否则均需要用小角引号 '' 或 "" 或反引号 `` 将内容包裹起来；键值内容按 CSS 语法规则组织所需的代码。配置之前，应先声明歌词数组。

let geci = [[2,"歌词一",2.5],[5,"歌词二",4]]; /* 声明歌词数组 */
	HCPlayer({
    	papa: '#papa', /* 宿主元素 即帖子主元素*/
    	lrcAr: geci, /* 歌词 */
    	lrc_css: 'top: 20px;', /* lrc歌词元素配置 */
    	player_css: 'bottom: 20px;', /* 播放器元素配置 */
    	fs_css: 'left: 10px; top: 10px; --color: snow; --bg: black;', /* 全屏按钮配置 */
    	/* 其他可能的参数 */
	});

默认情况下，插件基于歌词、播放控制器以及全屏显示交互按钮等无需配置也可以正常工作，因此，最简单的配置可以是：

HCPlayer({papa: '#papa'});

插件列表及配置举例



	
1、圆环进度条 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 歌词位置 */
		color: silver; /* 歌词底色 */
		--bg: linear-gradient(rgba(10,200,100,.4),rgba(10,200,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 10px; /* 播放器位置 */
		--track: rgba(255,255,255,.6); /* 进度底色 */
		--prog: rgba(10,250,10,.6); /* 进度颜色 */
		--color: snow; /* 按钮和文本颜色 */
	`,
	fs_css: `
		left: 20px; /* 全屏按钮位置 */
		top: 20px; /* 全屏按钮位置 */
		--color: snow; /* 按钮文本色 */
		--bg: #333; /* 按钮背景色 */
	`,
});


	
2、管状进度条 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: silver; /* 歌词底色 */
		--bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 10px; /* 位置 */
		opacity: .95; /* 透明设置 */
		--track: silver; /* 进度底色 */
		--prog: teal; /* 进度颜色 */
		--color: lightgreen; /* 按钮和文本颜色 */
		/* 按钮设置 支持图片、渐变背景*/
		--bg: url('https://638183.freep.cn/638183/t23/btn/disc.png') no-repeat center/cover;
	`,
});


	
3、细线进度条 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: silver; /* 歌词底色 */
		--bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 10px; /* 位置 */
		color: lightgreen; /* 文本颜色 */
		--track: silver; /* 进度底色 */
		--prog: teal; /* 进度颜色 */
		--bg: conic-gradient(pink,red,green,blue);/* 按钮设置 支持图片、渐变背景*/
	`,
});


	
4、普通频谱 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: silver; /* 歌词底色 */
		--bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 20px; /* 位置 */
		color: #fff; /* 文本颜色 */
		--track: #efefef; /* 进度底轨颜色 */
		--prog : green; /* 进度颜色 */
 		--cap: #eee; /* 频谱帽颜色 */
	`,
	/* 频谱设置 num: 总数, width: 宽度, height: 高度, color: 颜色（若无color参数则使用随机颜色）*/
	pinpu: {num: 90, width: 4, height: 120, color: 'darkgreen'},
});


	
5、meter频谱 

	
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: `
		top: 20px;
		color: lightblue;
		--bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
	`,
	player_css: `
		bottom: 10px;
		color: snow;
	`,
	/* 频谱设置 num - 频谱数; width - 频谱条宽; color - 频谱条颜色（不要 color 则去随机颜色）*/
	pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
});


	
6、圆环斜频谱 

	
 HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: silver; /* 歌词底色 */
		--bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 50px; /* 位置 */
		color: #fff; /* 文本颜色 */
		--len: 1px; /* 频谱条宽度 */
	`,
	pinpu_num: 40, /* 频谱数 */
	fs_css: 'top: 150px;', /*全屏按钮位置*/
});


	
7、圆环正频谱 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: silver; /* 歌词底色 */
		--bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 50px; /* 位置 */
		color: #fff; /* 文本颜色 */
		--len: 1px; /* 频谱条宽度 */
	`,
	pinpu_num: 40, /* 频谱数 */
});


	
8、水波纹按钮 

	
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: `
		top: 20px;
		color: lightblue;
		--bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
	`,
	player_css: `
		left: 50px;
		transform: rotate(45deg); /* 播放器旋转 */
		--bg: rgb(200,200,200,.75);
		--br: 50%; /* 圆角设置 50%为圆形，0% 为矩形 */
	`,
});


	
9、示波进度条 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: lightblue; /* 歌词底色 */
		--bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 20px; /* 位置 */
		--track: #0E5293; /* 底轨颜色 */
		--prog: yellow; /* 进度颜色 */
		--ww: 400px; /* 示波宽度 */
	`,
});


	
10、滑块进度条 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: lightblue; /* 歌词底色 */
 		--bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 20px; /* 位置 */
		color: #fff; /* 文本颜色 */
		--track: lightblue; /* 底轨颜色 */
		--prog: snow; /* 进度颜色 */
		--ww: 300px; /* 示波宽度 */
		--slider: orange;
	`,
	fs_css: '--color: antiquewhite; --bg: navy;', /* 全屏按钮 */
});


	
11、3d六面体 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	ttAr: ['3D', '立体', '盒子', 'LRC','歌词','同步'],  /* 面板文字 */
	lrc_css: `
		top: 20px; /* 位置 */
		color: lightblue; /* 歌词底色 */
 		--bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));  /* 歌词同步颜色 */
	`,
	player_css: `
		bottom: 60px; /* 位置 */
		color: #fff; /* 文本颜色 */
		--ww: 100px; /* 播放器总宽度 */
		--hh: 60px; /* 播放器总高度 */
	`,
	fs_css: 'left: 10px; top: 10px; --color: #eee; --bg: #333;', /* 全屏按钮 */
});


	
12、充电器进度条 

	
HCPlayer({
	papa: '#papa', /* 宿主元素 */
	lrcAr: geci, /* 歌词 */
	/* lrc_css 缺省，使用默认设置 */
	player_css: `
		bottom: 20px; /* 位置 */
		--track: transparent; /* 进度底色 */
		--prog: lightgreen; /* 进度颜色 */
		--ww: 240px; /* 播放器宽度 */
		--hh: 24px; /* 播放器总高度 */
	`,
	fs_css: '--color: #eee; --bg: #333;', /* 全屏按钮 */
});


	
13、卡式磁带 

	
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
		/* lrc_css 歌词缺省，使用默认设置 */
	player_css: `
		bottom: 20px; /* 位置 */
		--track: silver; /* 进度底色 */
		--prog: black; /* 进度颜色 */
	`,
	title: '卡式磁带',
	/* fs_css 全屏按钮缺省 */
});


	
14、假响应式频谱 

	
/* 去 http://mhh.52qingyin.cn/art/show.php?st=5&sd=5&art=1692093449 获取 ypData 并与歌词数组一样放置在插件配置之前，缺省使用假音波数据 */
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	ypData: ypData,
	lrc_css: '',
	player_css: '--ww: 50%; --hh: 160px; --color1: navy; --color2: lightblue; bottom: 0;',
	pinpu: {size: 5, gap: 1}, /* 频谱条宽度与彼此间间隔 */
});


	
15、老唱机 

	
/* 尺寸固定为 240*240 */
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	rc_css: 'top: 20px;',
	player_css: `
	right: 20px;
		color: white; /* 文本颜色 */
		--color1: red; /* 唱碟中心颜色 */
		--color2: snow; /* 唱碟内圈颜色 */
	`,
});


	
16、示波状频谱 

	
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	player_css: `
		bottom: 30px;
		border-width: 0;
		color: #eee;
		--hh: 100px; /* 频谱最大高度 */
		--discSize: 35px; /* 播放按钮宽高 */
		--discBg: conic-gradient(tan,green,pink,purple); /* 播放按钮背景，支持图片、渐变 */
	`,
	/*pinpu子对象：num，频谱条数；size，频谱条厚度；gap：频谱条间距;
	color1和2，参与渐变颜色，缺省或空值插件自取颜色值 */
	pinpu: {num: 100, size: 2, gap: 0, color1: '', color2: ''},
});


	
17、脚链频谱 

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


	
18、曲线进度条 

	
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	fs_css: 'bottom: 35px; color: purple; background: transparent;',
	player_css: `
		width: 200px; /* 宽度 */
		height: 90px; /* 高度 */
		bottom: 10px;
		filter: hue-rotate(200deg); /* 改变按钮颜色 */
		--track: lightgray;
		--prog: green;
	`,
	dir: 3, /* 曲线凸面朝向，0=朝下，1=朝上，缺省是 0，2和3两端有短线 */
	img: {play: '', pause: ''}, /* play: 播放按钮图片，pause: 暂停按钮图片，缺省使用默认配置 */
});


	
19、自由路径进度条 

	
HCPlayer({
	papa: '#papa',
	lrcAr: geci,
	lrc_css: 'top: 20px;',
	fs_css: 'color: tan; background: transparent;',
	player_css: `
		width: 200px; /* 宽度 */
		height: 60px; /* 高度 */
		bottom: 10px; /* 播放器位置 支持 left、top、right、bottom 等属性 */
	`,
	/* svg path d 属性路径，支持闭合路径，可随意设计 */
	path: 'M10 45 a5 5 0 0 1 5 -5 h170 a5 5 0 0 1 5 5 v5 a5 5 0 0 1 -5 5 h-170 a5 5 0 0 1 -5 -5 v-5',
	btn: {left: 34, top: 0}, /* 按钮位置 */
	track: {track: 'olive', prog: 'snow'}, /* 进度条底色和进度显示色 */
	img: {play: '', pause: ''}, /* play: 播放按钮图片，pause: 暂停按钮图片，缺省使用默认配置 */
});


	
待续……