黑暗战役B

马黑黑 · 发表于 2025-4-27 08:46

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

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

x

马黑黑 · 发表于 2025-4-27 08:46

<style>
	@import 'https://638183.freep.cn/638183/web/ku/hc_player3in1.css';
	#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://638183.freep.cn/638183/t24/webp3/havy.webp') no-repeat center/cover; animation: flashing .2s linear infinite alternate var(--state); }
	#mplayer { bottom: 20px; }
	#fsbtn { top: 30px; }
	.vid { opacity: .5; }
	@keyframes flashing {
		0% { filter: brightness(.5); }
		100% { filter: brightness(1); }
	}
</style>

<div id="papa" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1488360994" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/10/06/39/video6365c52f94302.mp4" autoplay loop muted></video>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hc_player3in1.js';
	import { h5lz } from 'https://638183.freep.cn/638183/web/ku/h5lz.js';
	hcplay(papa);
	var lzConfig = {
		papa: '#papa',
		total: 100,
		size: {width: 10, height: 10},
		shape: {background: 'white', borderRadius: '50% 0'},
		ani: 'toBottom',
		maxTime: 40,
		offset: {x: -200, y: -200}
	};
	h5lz(lzConfig);
</script>

马黑黑 · 发表于 2025-4-27 08:46

本帖最后由马黑黑于 2025-4-27 09:34 编辑

hc_player3in1，基于花潮格式LRC歌词同步封装的花潮音频播放器，而此前推出的 hcplayer3in1 基于原生LRC歌词同步，这是二者的区别。文件名书写上，花朝格式的有一个 _ ，原生的没有。

3in1 就是三合一：纯音、横排歌词、竖排歌词。

纯音：

参照本帖代码，关键在 21 行， hcplay(papa); ，函数传参只有一个 papa，帖子主元素的 id 标识；

歌词横排：

CSS 代码中加入 #lrcDiv { ... } 属性，主要用于定位，left、top 之类的，也可以参考以前的同类插件自定义文本颜色等。

JS代码中，hcplay 函数加一个传参， hcplay(papa, geci); ，其中，geci 是花朝格式LRC歌词变量，需要实现声明该变量并给它赋值，例如下面的代码示例——

var geci = [ [1.00,"刀郎 - 罗刹海市",5.5], [14.14,"罗刹国向东两万六千里",6.0], [20.74,"...",6.1] ];
hcplay(papa, geci);

竖排歌词：

在横排歌词的基础上，在帖子 CSS 代码中的 #lrcDiv 加入:

#lrcDiv { writing-mode: vertical-rl; }

马黑黑 · 发表于 2025-4-27 08:47

本帖最后由马黑黑于 2025-4-27 09:53 编辑

h5粒子是之前做的插件，这里已经改为了ES6模块，使用起来更方便。

首先，需要引入模块：

import { h5lz } from 'https://638183.freep.cn/638183/web/ku/h5lz.js';

接着，配置粒子属性：

var lzConfig = {
papa: '#papa', /* 给出帖子元素连同 # 号的id名称 */
total: 100,  /* 粒子数量 */
size: {width: 10, height: 10},  /* 粒子宽高尺寸 */
shape: {background: 'white', borderRadius: '50% 0'}, /* 粒子背景和形状：本行不要或引号内啥也没有的话使用默认值 */
ani: 'toBottom',  /* 粒子运行方向，可选值还有：toTop, toRight, toLeft */
maxTime: 40,  /* 粒子运动一个周期的最大秒数 */
offset: {x: -200, y: -200}  /* 粒子运动偏移量：粒子从出发的地方到结束的地方，xy方向各自偏移多少像素 */
};

最后，运行函数，把声明的参数带上：

h5lz(lzConfig) ;

除帖子元素必须存在外，其余属性配置可以省略，这将使用模块的默认配置，所以最简单的粒子配置无需声明属性配置，如下：

h5lz({papa: '#papa'});