论坛 › 马黑黑教程专版 › mp3player单曲js模块v1文档

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

mp3player单曲js模块v1文档

<style>
        .artbox p { margin: 8px 0; }
</style>

<div class="artBox">
<h3>一、应用代码示例</h3>
<div id="hEdiv1"><pre id="hEpre1">
&lt;style&gt;
        /* 引入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; }
&lt;/style&gt;

&lt;div id="tz"&gt;
        &lt;!-- 音频 audio 标签必须是帖子的子标签 --&gt;
        &lt;audio src="mp3地址"&gt;&lt;/audio&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        /* 引入JS模块 */
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js';
        /* 运行模块 */
        hcplay(tz);
&lt;/script&gt;
</pre></div>
<h3>二、主要步骤拆解</h3>
<p>步骤一：引入模块</p>
<div id="hEdiv2"><pre id="hEpre2">
/ *引用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';
</pre></div>
<p>步骤二：调用 hcplay() 参数</p>
<div id="hEdiv3"><pre id="hEpre3">
//element参数使用播放器的宿主元素id
//例如：帖子父元素 id="tz"，则用 tz 取代 element
hcplay(element);
</pre></div>
<h3>三、个性化配置</h3>
<p>（一）自定义按钮方法1</p>
<p>模块支持自定义按钮，若需要使用自己的按钮图片，可准备好播放、暂停、静音开、静音消四个小图片，并在JS代码中调用 hcplay() 函数前按如下格式声明按钮图片对象变量：</p>
<div id="hEdiv4"><pre id="hEpre4">
var mypics = {
        play: '播放按钮图片地址',
        pause: '暂停按钮图片地址',
        mute: '静音按钮图片地址',
        unmute: '静音消按钮图片地址',
};
</pre></div>
<p>然后，将所定义的变量名加入到函数 hcplay() 中：</p>
<div id="hEdiv5"><pre id="hEpre5">
        hcplay(tz, mypics);
</pre></div>
<p>（二）自定义按钮方法2</p>
<p>不更换按钮图片也可以通过CSS做一些细小的按钮改动，例如将默认黑色描边的按钮变为白色系的描边风格：</p>
<div id="hEdiv6"><pre id="hEpre6">
/* CSS代码中针对播放器图片做滤镜颜色反转，取值范围 0~1 */
#mplayer img { filter: invert(.8); }
</pre></div>
<p>（三）自定义进度条颜色、文本风格等</p>
<p>这里一并举例说明，都在CSS代码中操作：</p>
<div id="hEdiv7"><pre id="hEpre7">
/* 播放器长度、定位、背景、阴影、前景色等 */
#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; }
</pre></div>
<h3>四、LRC歌词同步操作</h3>
<p>举例说明如下：</p>
<div id="hEdiv8"><pre id="hEpre8">
/* 声明花朝格式LRC歌词数组 */
var geci = [
        ,
        ,
        ,
];

/* 调用 hcplay() 函数加入歌词参数 */
hcplay(tz, null, geci); //null参数表示放弃自定义按钮图片
</pre></div>
<p>未尽事宜欢迎讨论交流。</p>
</div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
for (let i = 1; i <= 8; i++) {
hlight.hl(window[`hEdiv${i}`], window[`hEpre${i}`]);
}
</script>

马黑黑 发表于 2025-2-25 12:29

示例链接：Rise Above（单曲v1示范） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

梦江南 发表于 2025-2-25 13:46

谢谢黑黑老师辛苦！

马黑黑 发表于 2025-2-25 14:19

梦江南 发表于 2025-2-25 13:46
谢谢黑黑老师辛苦！

{:4_190:}

花飞飞 发表于 2025-2-25 18:57

这说明书太详细了。。保姆式教程。。。{:4_199:}

红影 发表于 2025-2-25 19:02

“不更换按钮图片也可以通过CSS做一些细小的按钮改动，”

这个完全没想到呢，太好了{:4_199:}

花飞飞 发表于 2025-2-25 19:04

自定义设置最完美 了，光按纽都给了两种方法。。。
{:4_173:}有事儿了，晚上细看这个说明。。。

红影 发表于 2025-2-25 19:31

看看这个，在看看实例，相互参照着学习，真好{:4_187:}

小辣椒 发表于 2025-2-25 20:13

看了实例再回过头来看看这里的细节分享，黑黑考虑全面，

马黑黑 发表于 2025-2-25 20:48

小辣椒 发表于 2025-2-25 20:13
看了实例再回过头来看看这里的细节分享，黑黑考虑全面，

{:4_190:}

杨帆 发表于 2025-2-25 21:32

谢谢马老师深入浅出、简明扼要、细致入微的讲解{:4_190:}

马黑黑 发表于 2025-2-25 22:08

杨帆 发表于 2025-2-25 21:32
谢谢马老师深入浅出、简明扼要、细致入微的讲解

客气客气

查看完整版本: mp3player单曲js模块v1文档