千秋岁

马黑黑

马黑黑

帖子代码

<style>
#mama {
	margin: 30px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/4/qmqqsv.jpeg') 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;
	transform: rotateY(180deg);
	-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=2018166139" autoplay loop></audio>
	<video src="https://img.tukuppt.com/video_show/6181262/01/28/52/6291f4dfd1ef7.mp4" autoplay loop muted></video>
</div>

<script>
var geci = `[00:01:00]千秋岁\n[00:06.12]歌手 : 以冬\n[00:10.26]作词 : 青柠/温瑞梁\n[00:14.68]作曲 : 刘烁七\n[00:18.97]出品：网易电波\n[00:21.12]黑云压雨笼城楼\n[00:23.40]落叶跃湖面似孤舟\n[00:28.56]乌鸦盘旋枯枝头\n[00:30.72]瞧那菱花镜替伊人说愁\n[00:35.76]相思滋味如何受\n[00:39.54]捻碎罗袖一片绸\n[00:42.09]早已悔教夫婿觅封侯\n[00:49.80]日落月升微听马蹄声\n[00:53.19]惦记某人恨几分\n[00:57.03]几樽空杯双影叠交加\n[01:00.48]醒来却是梦啊\n[01:04.53]日落月升微听马蹄声\n[01:07.92]风携相思落飞花\n[01:11.94]提笔研墨剪影入画\n[01:15.60]寄云霞\n[01:35.04]黑云压雨笼城楼\n[01:37.26]落叶跃湖面似孤舟\n[01:42.39]乌鸦盘旋枯枝头\n[01:44.55]瞧那菱花镜替伊人说愁\n[01:49.62]相思滋味如何受\n[01:53.40]捻碎罗袖一片绸\n[01:55.92]早已悔教夫婿觅封侯\n[02:03.54]日落月升微听马蹄声\n[02:07.08]惦记某人恨几分\n[02:10.92]几樽空杯双影叠交加\n[02:14.34]醒来却是梦啊\n[02:18.36]日落月升微听马蹄声\n[02:21.78]风携相思落飞花\n[02:25.80]提笔研墨剪影入画\n[02:29.40]寄云霞\n[02:33.12]日落月升微听马蹄声\n[02:36.63]惦记某人恨几分\n[02:40.38]几樽空杯双影叠交加\n[02:43.89]醒来却是梦啊\n[02:47.91]日落月升微听马蹄声\n[02:51.33]风携相思落飞花\n[02:55.26]提笔研墨剪影入画\n[02:58.95]寄云霞\n[03:01.100]2024-8-17`;

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

sf.onload = () => {
	HCPlayer({
		papa: '#mama',
		geci: geci,
		skip: .5,
		average: 0,
		pinpu: { num: 40, width: 3, height: 120, color: 'linear-gradient(white 1px, transparent 4px, transparent 80%, white 80.5% 0)' },
		player_css: 'right: 100px; bottom: 20px; color: silver;',
		lrc_css: 'left: 30px; bottom: 20px; --bg: linear-gradient(#eeffee, #eeffeef0, #eeffee80); color: #666;',
		fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: darkred;',
	});
};
</script>

马黑黑

本帖测试：原生lrc歌词同步之meter+频谱播放器

最近封装的原生lrc系列插件，对 audio、video 标签均无 id 或 class 要求，只要这些标签是帖子容器里的内容就成；对 audio 只认帖子容器里的第一个，对 video 标签，只要是帖子容器里面的，插件全部识别并进行管控。

meter 标签是一个测量标签，用于展示诸如仪表分量值之类的东东，可以用与进度表示，动态的进度变化会有默认的颜色出现。

了解 meter_pinpu_yslrc 插件的具体配置请移步：原生lrc歌词同步之meter频谱播放器 (52qingyin.cn)

起个网名好难

                               
登录/注册后可看大图

meter_pinpu_yslrc.js 是 CSS、html和js 混合体

红影

带meter 标签和频谱以及原生歌词的新封装，这个漂亮

梦江南

谢谢老师辛苦！周末快乐！

红影

这个制作古色古香的，很雅致

红影

视频使用了遮罩，有个地方没看懂，用了transform: rotateY(180deg); logo应该到左上角了，遮罩为什么是to right top？怎么感觉应该是to right bottom？

马黑黑

起个网名好难 发表于 2024-8-17 08:02
meter_pinpu_yslrc.js 是 CSS、html和js 混合体

很多插件，包括框架（比如jQuery），都不可避免地这么做，只是各自的处理方式不同，有的是离散处理，有的会集中不同类别的东东。

本身，css+html+js 就是构成web页有机体的方式，而js就是操控css和HTML的，一些css和html封装到JS中再自然不过。

马黑黑

醉美水芙蓉 发表于 2024-8-17 08:58
欣赏老师带来的精彩单图！

马黑黑

红影 发表于 2024-8-17 08:15
带meter 标签和频谱以及原生歌词的新封装，这个漂亮

其实也没啥新不新的，就是在花潮格式lrc的基础上加入人工制作的歌词变为插件制作而已，精准度没那么好

马黑黑

红影 发表于 2024-8-17 08:29
视频使用了遮罩，有个地方没看懂，用了transform: rotateY(180deg); logo应该到左上角了，遮罩为什么是to r ...

遮罩的设置针对原始元素，而非元素旋转后再去遮罩。

背景图片、渐变背景等，都是针对原始元素，它们不会考虑和它们一样并行的属性。

起个网名好难

马黑黑 发表于 2024-8-17 09:18
很多插件，包括框架（比如jQuery），都不可避免地这么做，只是各自的处理方式不同，有的是离散处理，有的 ...

多见的是js + 同名css, html标签在js里 createElement 。

自然“条条道路通罗马”， 到达目的就OK

马黑黑

起个网名好难 发表于 2024-8-17 09:36
多见的是js + 同名css, html标签在js里 createElement 。

自然“条条道路通罗马”， 到达目的就OK

这要看需求情况。如果CSS独立出来，则会需要做帖时多加一句引入CSS的语句，如果针对个人网站，这没啥问题，论坛做帖少一个设置比多一个设置方便。

起个网名好难

马黑黑 发表于 2024-8-17 09:43
这要看需求情况。如果CSS独立出来，则会需要做帖时多加一句引入CSS的语句，如果针对个人网站，这没啥问题 ...

引入CSS就一句, 至少可省略的3个 *_css还给js减了负。

马黑黑

起个网名好难 发表于 2024-8-17 09:53
引入CSS就一句, 至少可省略的3个 *_css还给js减了负。

这类系列插件都是个位数KB级别的体量，想一想人家是MB级别的，对压力应该是无感的

起个网名好难

马黑黑 发表于 2024-8-17 10:12
这类系列插件都是个位数KB级别的体量，想一想人家是MB级别的，对压力应该是无感的

和压力无关习惯而已

红影

马黑黑 发表于 2024-8-17 09:19
其实也没啥新不新的，就是在花潮格式lrc的基础上加入人工制作的歌词变为插件制作而已，精准度没那么好

和原来的不同，就是新呢

红影

马黑黑 发表于 2024-8-17 09:22
遮罩的设置针对原始元素，而非元素旋转后再去遮罩。

背景图片、渐变背景等，都是针对原始元素，它们不 ...

原来如此，还以为是针对旋转后的呢。还好在这个帖子里看到，之前我一直都是弄错了啊