新圆环播放器模块使用说明
本帖最后由 马黑黑 于 2024-11-28 17:02 编辑 <br /><br /><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>圆环播放器模块使用ES6标准编写，引用模块及配置模块方法如下：</p>
<div id="d1"><pre id="p1">
<script type="module">
//引用模块
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/circle_lrc.js';
//配置模块参数一 ：基于纯音乐
hcplay(ma);
//配置模块参数二 ：基于lrc歌词同步
var geci = [,];
hcplay(ma, geci);
</script>
</pre></div>
<p>注意：模块参数的配置方法根据需要任选其一，不能两个都选。</p>
<p>虽然模块引用与参数配置极简，但也需要相应的前台配套才能支持模块的运行。一是CSS，需要引用一个CSS文档、做简单的播放器定位、配色工作：</p>
<div id="d2"><pre id="p2">
<style>
@import 'https://638183.freep.cn/638183/web/css/audlrc.css?v=1.11'; /* 引用CSS资源 */
/* 播放器定位与配色 */
#mplayer { bottom: 10px; --svgtrack: #ccc; --svgprog: #fefefe; --svgopacity: .65; }
/* 这里是其它的CSS代码 */
</style>
</pre></div>
<p>配色方式不止上述这种方法，只要熟悉CSS，可以绕开CSS变量具体给播放器的进度条底色、进度条覆盖色、时间信息文本颜色、按钮颜色分别进行设计。</p>
<p>二是HTML结构。在关键帖子元素中使用 class 属性以令所引用的CSS资源生效：</p>
<div id="d3"><pre id="p3">
<div id="pa" class="pa">
<audio src="音乐地址"></audio>
<video class="vid" src="视频地址" autoplay loop muted></video>
<!-- div id="fsbtn" class="fsbtn">进入全屏</div-->
</div>
</pre></div>
<p>上面代码中，帖子容器、视频、全屏按钮等凡有class属性的，都会使用对应的CSS资源所设置的class选择器所设定的样式，不满意的可使用 #选择器 重新设定相关CSS属性。</p>
<p>最后给出《FMG》一帖的代码供大家参考：</p>
<div id="d4"><pre id="p4">
<style>
@import 'https://638183.freep.cn/638183/web/css/audlrc.css?v=1.11';
#pa { margin: 30px 0 30px calc(50% - 593px);background: url('https://638183.freep.cn/638183/t24/webp2/fmg.webp') no-repeat center/cover; }
#mplayer { bottom: 10px; --svgtrack: #eee; --svgprog: #DEDEE5; --svgopacity: .45; }
#fsbtn { top: 10px; }
</style>
<div id="pa" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1836017843" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/12/49/39/video6363486389f0f.mp4" autoplay loop muted></video>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js?v=1.11';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/circle_lrc.js?v=1.11';
hcplay(pa);
fscreen.fs(pa, 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(d4, p4);
</script>
本帖最后由 花飞飞 于 2024-11-28 15:47 编辑 <br /><br />audlrc.css?v=1.11看着它由昨天的1.1变成了1.11,CSS部分插件又升级了。。{:4_174:}<br><br>#mplayer { bottom: 10px; --svgtrack: #eee; --svgprog: #DEDEE5; --svgopacity: .45; }小播的配置越来越简洁，最妙的是给了透明度设置，可以跟背景更好的融合在一起。。<div><br></div><div>--svgprog: #DEDEE5; 内部文字暂停及覆盖色统一为一种。。这个好方便 。</div><div>--svgtrack: #eee;圆环色彩另外设置</div> #pa class="pa" hcplay(pa); fscreen.fs(pa, fsbtn);全体对应。。
从头到尾要跟#pa走完全程 。。{:4_173:}
太好记了了。。 十几行代码，包含音画贴子所有元素，音乐，画面，小播，进度条，视频，小体积大容量。。。
精致小巧的音画模板。。{:4_199:} 这是纯音乐的，简洁到了极致，几乎不需要多少配置就能完成一个帖子，太方便了{:4_199:} 黑黑总能带来令人惊叹的美妙代码，太赞了{:4_199:}{:4_199:}{:4_199:} 看完了说明，赶紧去赏帖子去{:4_193:} 花飞飞 发表于 2024-11-28 15:45
本帖最后由 花飞飞 于 2024-11-28 15:47 编辑 audlrc.css?v=1.11看着它由昨天的1.1变成了1.11,CSS部分插件 ...
也不是啥升级，调整一下下 花飞飞 发表于 2024-11-28 15:54
#pa class="pa" hcplay(pa); fscreen.fs(pa, fsbtn);全体对应。。
从头到尾要跟#pa走完全程...
#选择器 除了 #lrc、#mplayer 不能变，其他的都可以的；class选择器 则是这么定的
花飞飞 发表于 2024-11-28 15:56
十几行代码，包含音画贴子所有元素，音乐，画面，小播，进度条，视频，小体积大容量。。。
精致小巧的音画 ...
二十行上下的代码不算太多 红影 发表于 2024-11-28 20:51
这是纯音乐的，简洁到了极致，几乎不需要多少配置就能完成一个帖子，太方便了
按约定的做就好 红影 发表于 2024-11-28 20:52
黑黑总能带来令人惊叹的美妙代码，太赞了
谢赞 红影 发表于 2024-11-28 20:53
看完了说明，赶紧去赏帖子去
瞅瞅更健康 马黑黑 发表于 2024-11-28 21:00
按约定的做就好
嗯嗯，这个太赞了{:4_199:} 马黑黑 发表于 2024-11-28 21:00
按约定的做就好
嗯嗯，这个太赞了{:4_199:} 马黑黑 发表于 2024-11-28 21:01
谢赞
应该谢谢黑黑带来的好东西才是呢{:4_187:} 马黑黑 发表于 2024-11-28 21:01
瞅瞅更健康
今天没法健康了，生病了，我得去睡了。黑黑晚安{:4_204:} 马黑黑 发表于 2024-11-28 20:57
也不是啥升级，调整一下下
小白一般这么认为，相似情况下后来的就是升级版 马黑黑 发表于 2024-11-28 20:59
#选择器 除了 #lrc、#mplayer 不能变，其他的都可以的；class选择器 则是这么定的
好哒，这个最好了。。可以灵活变通，跟手机装壳似的可以个性化。{:4_173:} 马黑黑 发表于 2024-11-28 20:59
二十行上下的代码不算太多
{:4_199:}要不看到我就觉得它是最新模板了。。
简洁的不能再简洁，容量又足够大。。