秋恋

马黑黑

马黑黑

帖子代码

<style>
#tz {
	margin: 130px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/4/qqlm.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=1945704217" autoplay loop></audio>
	<video src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4.mp4" autoplay loop muted></video>
</div>

<script>
var geci = `[00:00:00]云娃 - 秋恋\n[00:40.461]那一片秋叶轻轻落下\n[00:46.790]回忆未曾失去\n[00:55.053]那伤害流在我心里\n[01:01.319]痛彻心底\n[01:09.570]还记得那年你的话语\n[01:15.895]散落午后的大地\n[01:24.063]大地它带走我记忆\n[01:29.994]沉沦中我把你忘记\n[01:38.656]忘记你可爱的脸\n[01:44.883]还有爱你的思绪\n[01:53.172]思绪它牵牵绊绊\n[01:58.948]剪不断我的情思缠绵\n[02:36.549]还记得那年你的话语\n[02:43.126]散落午后的大地\n[02:51.320]大地它带走我记忆\n[02:57.164]沉沦中我把你忘记\n[03:05.848]忘记你可爱的脸\n[03:12.189]还有爱你的思绪\n[03:20.468]思绪它牵牵绊绊\n[03:26.243]剪不断我的情思缠绵\n[03:34.947]忘记你可爱的脸\n[03:41.180]还有爱你的思绪\n[03:49.572]思绪它牵牵绊绊\n[03:55.501]剪不断我的情思缠绵\n[04:04.698]无论思绪它怎样的牵绊\n[04:08.690]也剪不断我的情思缠绵`;

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

sf.onload = () => {
	HCPlayer({
		papa: '#tz',
		geci: geci,
		skip: 0,
		average: 3.5,
		lrc_css: 'top: 20px; --bg: linear-gradient(transparent, #ff0000c0); color: lightblue;',
		player_css: 'width: 260px; height: 10px; bottom: 20px; --prog: red; --track: gray; --color: yellow; --bg: url("https://638183.freep.cn/638183/t22/btn/g1.png") no-repeat center/cover',
		fs_css: '--bg: transparent; --color: snow;'
	});
};
</script>

马黑黑

原生lrc歌词同步之管状进度条：

average 参数用于调节歌句演唱用时平均值，具体请参阅 原生lrc歌词同步之管状进度条播放器 (52qingyin.cn) 的相关说明

梦江南

老师辛苦了！谢谢带来分享！

红影

又一个漂亮的原生歌词播放器封装，可以按需要选择来做帖子了

红影

制作漂亮，歌曲好听。欣赏黑黑好帖

马黑黑

梦江南 发表于 2024-8-14 13:53
老师辛苦了！谢谢带来分享！

马黑黑

红影 发表于 2024-8-14 14:51
制作漂亮，歌曲好听。欣赏黑黑好帖

感谢支持

茉莉

怡人的秋色，太美了

马黑黑

茉莉 发表于 2024-8-14 17:48
怡人的秋色，太美了

晚上嚎

马黑黑

醉美水芙蓉 发表于 2024-8-14 17:19
欣赏老师带来的精彩！

晚上好

红影

马黑黑 发表于 2024-8-14 15:03
感谢支持

这种原生歌词做帖子更方便了。

小辣椒

黑黑为不会做花潮歌词编辑器的朋友提供了这个原生态歌词同步，特别棒！

马黑黑

小辣椒 发表于 2024-8-14 23:01
黑黑为不会做花潮歌词编辑器的朋友提供了这个原生态歌词同步，特别棒！

小辣椒

马黑黑 发表于 2024-8-14 23:51

黑黑晚上好

冬天的雨

马老师的制作个个精彩，冬雨先欣赏了，暂时没有时间玩