椭圆环外观为椭圆，也可以通过帖子前台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>
| 
发表于 2024-12-5 11:57
发表于 2024-12-5 19:50