时间挂满山林

马黑黑 · 发表于 2024-8-13 12:29

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

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

x

本帖最后由马黑黑于 2024-8-13 21:41 编辑

马黑黑 · 发表于 2024-8-13 12:30

本帖最后由马黑黑于 2024-8-13 21:40 编辑

帖子代码

<style>
#tz {
	margin: 130px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/4/ujlb.jpg') no-repeat center/cover;
	box-shadow: 0 0 8px gray;
	overflow: hidden;
	z-index: 1;
	display: grid;
	place-items: center;
	position: relative;
}
#tz > video {
	position: absolute;
	width: 100%;
	height: calc(100% + 200px);
	object-fit: cover;
	mix-blend-mode: screen;
	pointer-events: none;
}
</style>

<div id="tz" class="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2113820733" autoplay loop></audio>
	<video src="https://img.tukuppt.com/video_show/2629112/00/02/07/5b50a5c0803ab.mp4" autoplay loop muted></video>
	<img src="https://638183.freep.cn/638183/t23/1/timestop.png" width="100px" alt="" style="position: absolute; bottom: 50px; opacity: .75;" />
</div>

<script>
var geci = `[00:00.00]时间挂满山林\n[00:00.947]我从山上走下\n[00:04.239]拾尽落在天边的朝霞\n[00:08.467]我将她们都藏进\n[00:11.928]昆仑崩塌前的夜\n[00:15.275]\n[00:16.025]我从山上走下\n[00:19.488]叠卷爱人不住的春夏\n[00:23.759]我将她们都藏进\n[00:27.063]望山起\n[00:28.466]你不归的芳华\n[00:30.423]\n[00:48.540]时间造我\n[00:52.307]璀璨与晶莹\n[00:56.149]我遂将时间挂满山林\n[01:02.805]\n[01:03.721]群山缭绕着我的衣裙\n[01:07.569]群山晕染着我的阴影\n[01:11.355]群山栽育了我的文明\n[01:14.807]与光阴\n[01:18.025]\n[01:18.942]群山回响着我的声音\n[01:22.769]群山刻满了我的寓意\n[01:26.603]群山消融我瘦弱身体\n[01:29.978]去充盈\n[01:32.264]这片阴影\n[01:33.826]\n[02:12.368]我从山上走下\n[02:16.154]叠卷爱人不住的春夏\n[02:19.986]我将她们都藏进\n[02:23.790]望山起\n[02:25.293]你不归的芳华\n[02:27.071]\n[02:27.515]还好天地间如此多荒野\n[02:31.101]生在万重山之间\n[02:35.151]我多想再见你一面\n[02:39.077]昆仑崩塌在眼前\n[02:41.533]\n[02:42.772]还好天地间如此多荒野\n[02:46.106]不怒登我者之卑劣\n[02:50.393]使我爱人可覆于此山间\n[02:54.318]终成川河流过我身前\n[02:58.101]\n[03:13.333]作词：蒲羽\n[03:15.236]作曲：蒲羽\n[03:17.067]编曲：蒲羽\n[03:19.014]缩混：王天培\n[03:20.962]制作：蒲羽\n[03:22.788]吉他：王子石\n[03:24.739]鼓手：江江\n[03:26.643]古筝：蒲羽\n[03:28.559]歌手：雾也至Woo Yeah\n`;

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/yslrc/svgcircle_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
	HCPlayer({
		papa: '#tz',
		geci: geci,
		skip: 0,
		lrc_css: 'left: 340px; bottom: 50px; --bg: linear-gradient(#ffffee30, #008c00a0); color: #8ad68afa',
		player_css: 'left: 200px; bottom: 20px; --prog: #00aa00a2; --track: #dddddd90; color: #ccc;',
		fs_css: '--bg: #00800080; --color: snow;'
	});
};
</script>

马黑黑 · 发表于 2024-8-13 12:41

本帖测试：原生lrc歌词模拟同步之圆形可控播放器插件

插件配置写在 HCPlayer({ ... }); 省略号处。配置说明：

一、papa: 必须，帖子容器CSS选择器，ID选择器写成 '#名称'，class选择器写成 '.名称'；

二、geci: 必须，原生lrc歌词，请参考帖子歌词的样子，确保歌词结构的完整性；

三、skip: 可选，时间偏移量纠正，0 表示不纠正；

四、lrc_css: 可选，按CSS语法设置歌词位置、颜色等，color 是歌词底色，--bg 是歌词同步色彩；

五、player_css: 可选，播放器位置、配色设置，使用CSS语法书写配置，--prog 是进度颜色，--track 是底轨颜色，color 是文本颜色；

六、fs_css: 可选，全屏按钮CSS配置，--bg 是按钮背景色，--color 是按钮文本颜色。