mp3player单曲js模块v1版本文档
一、应用代码示例
<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参数表示放弃自定义按钮图片
未尽事宜欢迎讨论交流。
前一篇: 椭圆环粒子播放器配置说明
下一篇: 没有了
发表评论:
评论列表 [0条]
