椭圆环粒子播放器配置说明
<style>.art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<div class="art">
<p>椭圆环外观为椭圆，也可以通过帖子前台CSS代码将其设置为圆形或其他形状。下面是模块的引用及参数配置，请根据需要选择两种配置中的一种：</p>
<div id="d1"><pre id="p1">
<script type="module">
/* 导入模块 */
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ellipse_lrc.css';
//配置模块参数一 ：基于纯音乐（tz为id="tz"的帖子容器对象，下同）
hcplay(tz);
//配置模块参数二 ：基于lrc歌词同步
var geci = [,];
hcplay(tz, geci);
</script>
</pre></div>
<p>模块需要css以及HTML相应元素代码的支持。先说css：</p>
<div id="d2"><pre id="p2">
<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>
</pre></div>
<p>HTML结构则根据是否需要lrc同步歌词、全屏按钮决定其元素结构，在相应元素中使用 class 属性以令所引用的CSS资源生效：</p>
<div id="d3"><pre id="p3">
<!-- 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>
</pre></div>
<p>上面代码中，帖子容器、视频、SVG、全屏按钮、lrc歌词容器等凡有class属性的，都会使用对应的CSS资源所设置的class选择器所设定的样式，不满意的可使用 #选择器 重新设定相关CSS属性。</p>
<p>最后给出《Discover》一帖全部代码供诸位参考。代码可以复制到 <a href="http://mhh.52qingyin.cn/api/pcode/" target="_blank">pencil-code</a> 或存为本地.html文档，然后修改相应数据观察运行结果：</p>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
hl.hl(d1, p1);
hl.hl(d2, p2);
hl.hl(d3, p3);
hl.hl(hEdiv, hEpre);
</script> 辛苦了！谢谢马老师深度分享{:4_191:} 这个说明更详细了，刚看了下，可以根据说明自己更改粒子的数量角度等，这个看上去更好玩。。
播放器的每一个属性也都给了说明，可以进行个性化设置。。
使用时配套说明，可以做符合贴子的个性化调整。。
看了作品，默认的配置都很经典，非常好看。。 花飞飞 发表于 2024-12-5 20:15
看了作品，默认的配置都很经典，非常好看。。
最好能研究一下CSS文档，酱紫做帖时心中有数 花飞飞 发表于 2024-12-5 20:14
播放器的每一个属性也都给了说明，可以进行个性化设置。。
使用时配套说明，可以做符合贴子的个性化调整。 ...
是的 杨帆 发表于 2024-12-5 13:01
辛苦了！谢谢马老师深度分享
晚上好 花飞飞 发表于 2024-12-5 20:13
这个说明更详细了，刚看了下，可以根据说明自己更改粒子的数量角度等，这个看上去更好玩。。
这个是纯css+HTML代码做成的播放器UI，播放器自带粒子，粒子也可以改变形状 配置说明其实很重要，这里看懂做起来就轻松了 粒子的配置居然是在#tz里的，还以为会另外设置一个名称呢。非常简洁，默认的也很好看，完美{:4_199:} 还封装了鼠标触碰的变色呢。封装的默认设置漂亮，还有可供自己修改的地方，又漂亮又方便{:4_199:} 感谢黑黑的详细讲解{:4_199:} 红影 发表于 2024-12-5 22:23
感谢黑黑的详细讲解
阔气阔气
小辣椒 发表于 2024-12-5 21:39
配置说明其实很重要，这里看懂做起来就轻松了
对的 红影 发表于 2024-12-5 22:13
粒子的配置居然是在#tz里的，还以为会另外设置一个名称呢。非常简洁，默认的也很好看，完美
帖子容器可以携带其子孙元素所需的CSS变量。事实上，在css里，最常见的做法是根选择器 :root 携带通用CSS变量 红影 发表于 2024-12-5 22:23
还封装了鼠标触碰的变色呢。封装的默认设置漂亮，还有可供自己修改的地方，又漂亮又方便
{:4_190:} 马黑黑 发表于 2024-12-5 23:05
阔气阔气
其实每个封装都要考虑很多细节，真不容易{:4_187:} 马黑黑 发表于 2024-12-5 23:07
帖子容器可以携带其子孙元素所需的CSS变量。事实上，在css里，最常见的做法是根选择器 :root 携带通用CSS ...
看到根选择器有点头晕，还是现在的样子好{:4_173:} 马黑黑 发表于 2024-12-5 23:07
谢大咖{:4_187:}