mp3player单曲js模块v1文档

马黑黑 · 发表于 2025-2-25 12:24

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

一、应用代码示例

<style>
	/* 引入CSS配套资源 */
	@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css';
	/* 帖子样式设置 */
	#tz { background: url('背景图片地址') no-repeat center/cover; }
	/* 播放器设置 */
	#mplayer { bottom: 10px; }
	/* 全屏按钮设置 */
	#fsbtn { bottom: 60px; border-color: white; color: snow; }
</style>

<div id="tz">
	<!-- 音频 audio 标签必须是帖子的子标签 -->
	<audio src="mp3地址"></audio>
</div>

<script type="module">
	/* 引入JS模块 */
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js';
	/* 运行模块 */
	hcplay(tz);
</script>

二、主要步骤拆解

步骤一：引入模块

/ *引用CSS配套资源 */
@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css';

/* 引用JS模块 */
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js';

步骤二：调用 hcplay() 参数

//element参数使用播放器的宿主元素id
//例如：帖子父元素 id="tz"，则用 tz 取代 element
hcplay(element);

三、个性化配置

（一）自定义按钮方法1

模块支持自定义按钮，若需要使用自己的按钮图片，可准备好播放、暂停、静音开、静音消四个小图片，并在JS代码中调用 hcplay() 函数前按如下格式声明按钮图片对象变量：

var mypics = {
	play: '播放按钮图片地址',
	pause: '暂停按钮图片地址',
	mute: '静音按钮图片地址',
	unmute: '静音消按钮图片地址',
};

然后，将所定义的变量名加入到函数 hcplay() 中：

	hcplay(tz, mypics);

（二）自定义按钮方法2

不更换按钮图片也可以通过CSS做一些细小的按钮改动，例如将默认黑色描边的按钮变为白色系的描边风格：

/* CSS代码中针对播放器图片做滤镜颜色反转，取值范围 0~1 */
#mplayer img { filter: invert(.8); }

（三）自定义进度条颜色、文本风格等

这里一并举例说明，都在CSS代码中操作：

/* 播放器长度、定位、背景、阴影、前景色等 */
#mplayer { width: 50%; bottom: 10px; background: none; box-shadow: none; color: snow; }
/* 进度条进度底轨、进度指示颜色 */
#prog { --track: gray; --prog: red; }
/* 全屏按钮定位、边框和颜色等 */
#fsbtn { bottom: 60px; border-color: snow; color: snow; }

四、LRC歌词同步操作

举例说明如下：

/* 声明花朝格式LRC歌词数组 */
var geci = [
	[2.0,"歌句一",3],
	[6.12.0,"歌句二",3.6],
	[12.60,"歌句三",4.3],
];

/* 调用 hcplay() 函数加入歌词参数 */
hcplay(tz, null, geci); //null参数表示放弃自定义按钮图片

未尽事宜欢迎讨论交流。