Moonlight

马黑黑 · 发表于 2025-3-27 19:02

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

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

x

马黑黑 · 发表于 2025-3-27 19:02

<style>
	@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
	#tz {  margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/5/moonlight.jpg') no-repeat center/cover; border-radius: 8px; }
	#mplayer { bottom: 20px; }
	#fsbtn { top: 25%; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=25910910" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/19/13/45/55/video67da5a13623dd.mp4" autoplay loop></video>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
	hcplay(tz);
</script>

马黑黑 · 发表于 2025-3-27 19:02

本帖最后由马黑黑于 2025-3-27 21:08 编辑

花潮经典版三合一播放器

啥是三合一

① 纯音乐
② 横排原生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>