三合一播放器使用说明书
位置:
首页 >
马黑教程[ 发布时间: 2025.3.29 作者: 花飞飞 阅读: 39 ]
一：三合一
① 纯音乐
② 横排原生lrc歌词
③ 竖排原生lrc歌词
二：引用资源
① 帖子CSS代码中第一行加入：@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
② 帖子JS代码加入：import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
三：自定义配置
① 通过CSS设置UI
/* 播放器 */
#mplayer {
bottom: 20px; /* 定位 : 还可以使用 top、left、right 配置 */
--track: #ccc; /* 进度条底色 */
--prog: #aaa; /* 进度条指示色 */
}
/* 歌词 ：纯音乐帖不需要配置 */
#lrcDiv {
top: 10%; /* 定位，支持 top、left、bottom、right 配套使用 */
color: #eee; /* 歌词颜色 */
writing-mode: vertical-rl; /* 竖排配置 ：横排不需要设置 */
--hlcolor: #333; /* 歌词高亮色 */
}
/* 全屏按钮 */
#fsbtn {
color: white; /* 前景色 */
border-color: white; /* 边框颜色 */
}
② HTML配套代码
<div id="tz" class="pa">
<-- 如果需要使用模块提供的视频样式 -->
<audio src="音频地址" autoplay loop></audio>
<video class="vid" src="视频地址" autoplay loop></video>
<-- 其它自定义代码 -->
</div>
③ JS配置代码
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js'; // 引用模块
// 纯音帖 : 注意 tz 是帖子容器对应的id，下同
hcplay(tz);
// 歌词同步帖
var gc = `。。。`; /* 歌词格式请参考帖子代码，支持分行书写（替代 n 符号）*/
hcplay(tz, gc); // 或者 ： hcplay(tz, gc, 7);（其中 7 指显示的歌词行数）
</script>
前一篇: 【黑师音画帖小白教程】第三十讲：完结篇
下一篇: 没有了
