Discover

凡哥 · 发表于 2024-12-5 11:57

凡哥 · 发表于 2024-12-5 11:58

椭圆环外观为椭圆，也可以通过帖子前台CSS代码将其设置为圆形或其他形状。下面是模块的引用及参数配置，请根据需要选择两种配置中的一种：

<script type="module">
	/* 导入模块 */
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ellipse_lrc.css';

	//配置模块参数一 ：基于纯音乐（tz为id="tz"的帖子容器对象，下同）
	hcplay(tz);

	//配置模块参数二 ：基于lrc歌词同步
	var geci = [[2.6,"歌词1",3.6],[7.5,"歌词2",4]];
	hcplay(tz, geci);
</script>

模块需要css以及HTML相应元素代码的支持。先说css：

<style>
	/* 引用配套CSS资源 */
	@import 'https://638183.freep.cn/638183/web/mod/ellipse_lrc.css';

	/* 帖子主容器可以配置粒子相关的CSS变量，也可以缺省以使用模块默认设置 */
	#tz {
		--lzNum: 40; /* 粒子总数（缺省50）*/
		--lzRot: 100deg; /* 粒子旋转角度（缺省80deg） */
		--lzSize: 8; /* 粒子最小尺寸（缺省10）*/
		--lzBg: purple; /* 粒子最小尺寸，支持颜色、渐变、图片（缺省随机）*/
		/* 这里开始其它必要的代码 */
	}

	/* 粒子的形状通过border-radius单独设置，不设置使用缺省值 */
	.lz {
		border-radius: 20% 70%; /* 缺省 50% */
	}

	/* 播放器 id="mplayer" 定位与配色 */
	#mplayer {
		--track: silver; /* 进度条底轨颜色（缺省#ccc）*/
		--prog: red; /* 进度条进度指示色（缺省#eee）*/
		color: silver; /* 文本颜色（缺省#eee） */
		width: 200px; /* 椭圆环宽度（缺省180px）*/
		height: 100px; /* 椭圆环高度（缺省90deg）*/
		/* border-radius: 50%; 默认圆角半径*/
		/* border: 20px dotted #336699; 默认边框样式*/
	}

	/* 按钮默认背景 ：支持颜色、图片与渐变 */
	/* #mbtn::after { background: linear-gradient(30deg, tan,green); } */

	/* #lrc { top: 15px; } lrc歌词定位机其它设置（若有） */

	/* #fsbtn { bottom: 20px; } 全屏按钮定位 */

	/* 这里是其它元素的CSS代码 */
</style>

HTML结构则根据是否需要lrc同步歌词、全屏按钮决定其元素结构，在相应元素中使用 class 属性以令所引用的CSS资源生效：

<!-- id="mplayer" 的播放控制器已经在模块中添加 -->
<div id="pa" class="pa">
	<audio src="音乐地址"></audio>
	<!--video class="vid" src="视频地址" autoplay loop muted></video-->
	<!--svg width="100%" height="100%"></svg-->
	<!-- div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div-->
	<!-- div id="fsbtn" class="fsbtn">进入全屏</div-->
</div>

上面代码中，帖子容器、视频、SVG、全屏按钮、lrc歌词容器等凡有class属性的，都会使用对应的CSS资源所设置的class选择器所设定的样式，不满意的可使用 #选择器重新设定相关CSS属性。

最后给出《Discover》一帖全部代码供诸位参考。代码可以复制到 pencil-code 或存为本地.html文档，然后修改相应数据观察运行结果：

<style>
	@import 'https://638183.freep.cn/638183/web/mod/ellipse_lrc.css';
	#tz { --lzNum: 40; --lzRot: 100deg; --lzSize: 8; background: url('https://638183.freep.cn/638183/t24/5/discover.jpg') no-repeat center/cover; }
	#mplayer { --prog: red; --track: silver; color: silver; width: 200px; height: 100px; }
	#fsbtn { bottom: 20px; }
</style>

<div id="tz" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30780810" autoplay loop></audio>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ellipse_lrc.js';
	import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
	hcplay(tz);
	fscreen.fs(tz, fsbtn);
</script>