孤夜舞

马黑黑

马黑黑

帖子代码

<style>
#mama {
	margin: 130px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/webp2/guyewu.webp') no-repeat center/cover;
	box-shadow: 0 0 8px gray;
	overflow: hidden;
	z-index: 1;
	position: relative;
}
#mama > video {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: color-burn;
	-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
	pointer-events: none;
}
</style>

<div id="mama" class="mama">
	<audio src="https://music.163.com/song/media/outer/url?id=2611596369" autoplay loop></audio>
	<video src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c04de909d0.mp4" autoplay loop muted></video>
</div>

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

sf.onload = () => {
	HCPlayer({
		papa: '#mama',
		geci: geci,
		skip: 0,
		average: 0,
		pinpu: {num: 100, size: 1, gap: 1, color1: 'red', color2: 'plum'},
		player_css: `
			left: 50%;
			transform: translateX(-50%);
			bottom: 20px;
			color: white;
			--hh: 100px;
			--discBg: url('https://638183.freep.cn/638183/web/svg/4yecc.svg') center/cover;
		`,
		lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient(lightblue, plum); color: #ccc;',
		fs_css: 'right: 20px; top: 20px; --bg: transparent; --color: snow;',
	});
};

var geci = `
	[00:00.675]孤夜舞
	[00:08.668]翻唱：一颗狼星_许篮心
	[00:11.479]词 曲/原唱 : Tăng Duy Tân
	[00:13.883]中文词 : 李孟言/OP欧欧欧
	[00:19.528]我曾经听过
	[00:22.275]听过一种夜来祭舞的传说
	[00:26.559]传说当那月色和灵魂交错
	[00:30.663]交错倒映出你我 前世允诺
	[00:35.979]梦里千万次 与你擦身而过
	[00:40.326]暮然回首 却不见 徒留寂寞
	[00:44.591]时光来去皆匆匆 花开花落
	[00:47.750]不知是谁苦苦 在寻觅爱的轮廓
	[00:52.779]若思念在反反复复
	[00:55.759]朝朝暮暮
	[00:57.895]情归何处
	[01:01.492]月夜下剩一人起舞
	[01:04.536]寒霜潜入
	[01:06.632]繁花皆卒
	[01:10.357]孤夜舞
	[01:13.440]music...
	[01:48.300]相遇又别离
	[01:51.372]大梦初醒 谁不肯归去
	[01:56.756]终究来不及
	[01:59.964]回忆散尽 怪岁月无情
	[02:04.748]梦里千万次 与你擦身而过
	[02:08.996]暮然回首 却不见 徒留寂寞
	[02:13.292]时光来去皆匆匆 花开花落
	[02:16.383]不知是谁苦苦 在寻觅爱的轮廓
	[02:21.436]若思念在反反复复
	[02:24.582]朝朝暮暮
	[02:26.505]情归何处
	[02:30.329]月夜下剩一人起舞
	[02:33.217]寒霜潜入
	[02:35.149]繁花皆卒
	[02:38.845]孤夜舞
	[02:42.125]End...
`;
</script>

马黑黑

示波状频谱插件测试。插件说明文档：原生lrc歌词同步之示波状频谱播放器 (52qingyin.cn)

彩云归

精彩，谢谢分享！

红影

有趣，暂停后中间的叶瓣还在转呢，只是转速慢了点。

红影

这个播放器漂亮，有按钮，还有进度时间，示波状上下频谱分列两侧，排布非常合理。
黑黑又一个同步播放器的封装呢，很赞

红影

歌词的配色十分奇妙，和奇特的背景相得益彰

马黑黑

彩云归 发表于 2024-8-28 10:12
精彩，谢谢分享！

马黑黑

红影 发表于 2024-8-28 10:38
有趣，暂停后中间的叶瓣还在转呢，只是转速慢了点。

所用图片是一个动图

梦江南

老师辛苦了！又是一个新作品！

马黑黑

梦江南 发表于 2024-8-28 14:27
老师辛苦了！又是一个新作品！

小辣椒

漂亮~~~这个画面很美，小女孩的舞姿也是优美，特别黑黑的视频效果加的太完美了

小辣椒

这个小频谱播放器也是漂亮，以前的频谱好像还宽度长一点，现在的漂亮

马黑黑

小辣椒 发表于 2024-8-28 20:54
这个小频谱播放器也是漂亮，以前的频谱好像还宽度长一点，现在的漂亮

这都是可以配置的

小辣椒

马黑黑 发表于 2024-8-28 21:12
这都是可以配置的

做的时候看看和图的相配可以自己调整尺寸的

马黑黑

小辣椒 发表于 2024-8-28 21:21
做的时候看看和图的相配可以自己调整尺寸的

插件提供各种参数，可以使用缺省的，也可以自己配置参数值

马黑黑

醉美水芙蓉 发表于 2024-8-28 21:18
欣赏老师漂亮的频谱播放器！

小辣椒

马黑黑 发表于 2024-8-28 22:49
插件提供各种参数，可以使用缺省的，也可以自己配置参数值

懒人会直接套用，当然我也是懒人

不过我一般会自己按图效果改一下自己喜欢的样式

红影

马黑黑 发表于 2024-8-28 13:00
所用图片是一个动图

嗯嗯，知道的，只是加上转动后更快点了。不知道如果转反向了，会是什么样