资源地址：

https://638183.freep.cn/638183/web/api/svg_path_lrc.js

一、引用方法：

（一）直接引用（建议）

	<script src="https://638183.freep.cn/638183/web/api/svg_path_lrc.js" charset="utf-8"></script>

（二）异步引用（不支持直接使用是建议用此法）

let loadJs = (url,callback) => {
	let body = document.querySelector('body'), jsNode = document.createElement('script');
	jsNode.charset = 'utf-8';
	jsNode.setAttribute('src', url);
	body.appendChild(jsNode);
	jsNode.onload = () => callback();
};

let js1 = "https://638183.freep.cn/638183/web/api/svg_path_lrc.js";

loadJs(js1, () => {
	//插件配置
});

二、插件配置

共 9 个参数：

① papa 指定播放器宿主，使用对应选择器名称，例如：papa: '#papa',。这意味着，安放播放器的元素 id="papa"。支持 class，使用 ‘.papa' 方式表达，插件只认可第一个出现的该class元素；

② lrcAr 指定歌词数组变量，需要事先声明花潮格式的lrc数组，比如 let lrcAr = [2,"歌词一",3]; ，然后给参数赋值：lrcAr: lrcAr, ；

③ lrc_css 设置歌词位置、颜色等，详情请参阅 HCPlayer插件汇总 (52qingyin.cn) 中的相关示例；

④ fs_css 设置全屏按钮，详情同 ③； 

⑤ player_css 设置播放器尺寸、位置等属性，详情同 ③；

⑥ path 设置播放器进度条路径。该路径是标准的 svg path 标签的  d 属性值，可以是任意形状的路径，但只支持单一路径，不支持组合和嵌套路径，换言之，所支持的路径，只能有一个 M（m）指令。路径配置示例：

        path: 'M 10 60 H 190',

这是一条起于 {10,60} 的横向直线路径，止于 {190,60} 处；

⑦ btn 设置播放器按钮位置。按钮两旁是播放时间信息、歌曲总时长信息。配置举例：

        btn: {left: 34, top: 0},

这表明按钮的CSS属性 left 值是 34px（配置是不能有px等单位），top 值是 0 px；

⑧ img 设置播放和暂停按钮图片，支持所有图片格式，支持 .svg 图形。举例：

        img: {play: 'https://123.com/play.jpg', pause: 'https://123.com/pause.jpg'},

⑨ track 配置进度条底轨和进度显示颜色，播放器进度帽和文本跟 prog 颜色。举例：

        track: {track: 'olive', prog: 'snow'},

以上各参数，顺序不论，但需要注意，有的配置值需要小角引号，有的不能要引号，另，每一个参数配置结束都需要有小角逗号。有些参数可以不配置（缺省）或保留空值，这将使用插件提供的预设配置。

三、完整的配置举例

let lrcAr = [ [2,"歌词一",4]];

	HCPlayer({
		papa: '#papa',
		lrcAr: lrcAr,
		lrc_css: 'top: 20px; --bg: linear-gradient(rgba(200,10,20,.35),rgba(200,10,20,.7)); color: #aaa;',
		fs_css: 'transform: translate(0,-35px); background: transparent;',
		player_css: 'width: 200px; height: 60px; top: 80px;',
		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: ''}
	});

可以访问HCPlayer插件汇总 (52qingyin.cn)的第19个插件以了解更多和查看效果。

前一篇: H5粒子插件
下一篇: 全屏插件使用说明及示例