马黑黑 发表于 2025-9-9 12:07

无忧梦呓

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/mgyi.webp') no-repeat center/cover; }
        #ma { width: 100px; height: 100px; left: 120px; bottom: 130px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 300px; height: 300px; left: 20px; bottom: 20px; }
        #prog, #track { fill: none; stroke: silver; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
        #prog { stroke: green; }
        #btnFs { left: 20px; top: 20px; color: #eee; border-color: currentColor!important; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2743214872" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/02/16/5b53fec979d9e.mp4" autoplay loop muted></video>
        <!-- svg路径播放进度指示 ：路径标签 path 的 id 指定为 prog -->
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <path id="track" d="M0,190 L-190,-190 Q0 -25,190 -190 L0,190" />
                <path id="prog" d="M0,190 L-190,-190 Q0 -25,190 -190 L0,190" />
        </svg>
        <div id="ma" class="brightness"></div>

</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        FS(pa, ma);
</script>

马黑黑 发表于 2025-9-9 12:07

本帖最后由 马黑黑 于 2025-9-9 12:38 编辑 <br /><br /><div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/mgyi.webp') no-repeat center/cover; }
        #ma { width: 100px; height: 100px; left: 120px; bottom: 130px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 300px; height: 300px; left: 20px; bottom: 20px; }
        #prog, #track { fill: none; stroke: silver; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
        #prog { stroke: green; }
        #btnFs { left: 20px; top: 20px; color: #eee; border-color: currentColor!important; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2743214872" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/02/16/5b53fec979d9e.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;!-- svg路径播放进度指示 ：注意 svg 及其子标签 path 的 id --&gt;
        &lt;svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"&gt;
                &lt;path id="track" d="M0,190 L-190,-190 Q0 -25,190 -190 L0,190" /&gt;
                &lt;path id="prog" d="M0,190 L-190,-190 Q0 -25,190 -190 L0,190" /&gt;
        &lt;/svg&gt;
        &lt;div id="ma" class="brightness"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        FS(pa, ma);
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-9-9 12:20

本帖最后由 马黑黑 于 2025-9-9 18:49 编辑

pathprog.js 模块约定：

需要一个 id="progress" 的 svg 标签，该标签内需要两个路径相同、stroke 描边颜色不同的 path 子标签，一个 id="track"做底轨用、另一个 id="prog" 做进度指示用。强调：svg 和其内两个 path 标签 id 做了死约定，不能用别的，模块检测到这三个 id 才会运行路径进度指示器。

svg 和 path 子标签可以使用CSS制定相关属性，例如，针对 svg 的定位、宽高尺寸等，针对 path 的 stroke 填充色（fill）、描边（stroke）颜色和描边厚度（stroke-width）、线帽样式、线条连接样式等等。两个 path 子标签一定要设置不同的颜色，否则没有进度指示。

pathprog 模块是在 全屏+小播 的基础上加入路径进度指示器，因此，延承此前的模块，导入模块之后的函数调用 FS(参数1, 参数2) 需要两个参数，参数1是帖子元素，参数2是小播，例如本帖的 FS(pa, ma)，其中 pa 是帖子的id，ma 是小播的 id。

小播是否和路径进度指示器放在一起可以自行决定并做好位置调整。

马黑黑 发表于 2025-9-9 12:28

【附】如何制作路径

本模块的路径形态的音频播放进度指示、控制器支持闭合和非闭合路径，可以使用 SVG 制作路径的相关绘制指令或单独一个指令、或多个指令组合进行绘制，所绘制的指令要求一线式，即一根线贯穿到底。对于复合路径（即多个路径组合的路径）模块不做任何处理，运行结果不可预知。

SVG路径的设计没有太多难度，关键是熟悉路径的几个绘制指令且具备一点点几何学知识。下面的链接是 path 标签知识详解，类似的文章网上很多：

https://juejin.cn/post/7139887421700702244

红影 发表于 2025-9-9 15:32

黑黑把这种带进度svg路径又封装好了，真方便，只要按约定的ID名称设计就行了{:4_187:}

红影 发表于 2025-9-9 15:35

这个制作真漂亮，这样的路径简单而漂亮，真棒{:4_187:}

花飞飞 发表于 2025-9-9 18:32

最近的贴子都相当梦幻，主题突出，色彩唯美，视频的烘托恰到好处又美到极致。。

换了种简单的三边形路径当进度条，同样点击可以改变歌曲位置。。

里面用了漂亮的雪花图片来当控制按纽。。
这按纽可用画的图案，也可以用图片，形式多样。。

花飞飞 发表于 2025-9-9 18:41

图案和进度条用两个相同的路径。
本来还想，能不能省一条呀，让进度条凭空出现，如果歌听不完就不知道图案是什么。。。{:4_170:}
结果看到这句：
强调：svg 和其内两个 path 标签 id 做了死约定，不能用别的，模块检测到这三个 id 才会运行路径进度指示器。

那就是捆绑好的呀，缺一不可，少一个就不出效果。。

花飞飞 发表于 2025-9-9 18:45

我就说封起来比较和蔼可亲，看上去没那么吓人。{:4_170:}

音乐轻快，蛮好听的。。点三个赞

马黑黑 发表于 2025-9-9 18:50

红影 发表于 2025-9-9 15:32
黑黑把这种带进度svg路径又封装好了，真方便，只要按约定的ID名称设计就行了

过去开发类似的插件，但在论坛引用没那么简洁，模块更合适论坛使用

马黑黑 发表于 2025-9-9 18:50

红影 发表于 2025-9-9 15:35
这个制作真漂亮，这样的路径简单而漂亮，真棒

是吧？路径不用太复杂

马黑黑 发表于 2025-9-9 18:51

花飞飞 发表于 2025-9-9 18:32
最近的贴子都相当梦幻，主题突出，色彩唯美，视频的烘托恰到好处又美到极致。。

换了种简单的三边形路径 ...

可以根据需要随意设计

马黑黑 发表于 2025-9-9 18:53

花飞飞 发表于 2025-9-9 18:41
图案和进度条用两个相同的路径。
本来还想，能不能省一条呀，让进度条凭空出现，如果歌听不完就不知道图案 ...

进度条通常都得有底色、覆盖色，一般的块状级别的标签可以考虑多种实现方式，SVG路径和元素只能成双成对出现了。

马黑黑 发表于 2025-9-9 18:53

花飞飞 发表于 2025-9-9 18:45
我就说封起来比较和蔼可亲，看上去没那么吓人。

音乐轻快，蛮好听的。。点三个赞

本来不想做，你说要做，那就只好弄一个了

花飞飞 发表于 2025-9-9 19:03

马黑黑 发表于 2025-9-9 18:53
进度条通常都得有底色、覆盖色，一般的块状级别的标签可以考虑多种实现方式，SVG路径和元素只能成双成对 ...

底色整透明隐身可以不呢。。{:4_170:}
还是想着如果边走边看形状，最后的图案让人意想不到。。

花飞飞 发表于 2025-9-9 19:04

马黑黑 发表于 2025-9-9 18:53
本来不想做，你说要做，那就只好弄一个了

丑丑的JS盖起来比较可爱{:4_173:}

花飞飞 发表于 2025-9-9 19:04

马黑黑 发表于 2025-9-9 18:51
可以根据需要随意设计

好哒，我去瞅瞅那个路径的网站。。。看有木有什么好玩的路径可以用用。

花飞飞 发表于 2025-9-9 19:20

马黑黑 发表于 2025-9-9 12:28
【附】如何制作路径

本模块的路径形态的音频播放进度指示、控制器支持闭合和非闭合路径，可以使用 SVG...


这网站说了路径设计的方法，指令啥的 ，怪好看的~~

花了 点时间试了之前用过的复合路径，回形针式的，音乐开始，从三个地方开始运用了。。
这个更好玩，如果底色隐去，更不知道接下来画什么了。{:4_170:}

花飞飞 发表于 2025-9-9 19:26

马黑黑 发表于 2025-9-9 18:53
进度条通常都得有底色、覆盖色，一般的块状级别的标签可以考虑多种实现方式，SVG路径和元素只能成双成对 ...

把银色silver变成transparent，完美，回形针好几个点同时开始运行，最后画完。

但和音乐的适配度还需要再提高，音乐没放完呢，它就画好了。

马黑黑 发表于 2025-9-9 19:55

花飞飞 发表于 2025-9-9 19:26
把银色silver变成transparent，完美，回形针好几个点同时开始运行，最后画完。

但和音乐的适配度还需 ...

这可能你设计的是复合路径
页: [1] 2 3 4 5 6
查看完整版本: 无忧梦呓