杂集（多音频模块测试）

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

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

帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz03.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/village.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; bottom: 30px; transition: .4s; }
#prog, #track { fill: none; stroke: url(#grd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: yellow; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
#btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor!important; }
#mList { right: 20px; bottom: 10px; color: yellow; }
#mList > p:hover { color: orange; }
.hLight { color: cyan; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25896403" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06f9cddd1.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs>
<radialGradient id="grd">
<stop offset="0%" stop-color="transparent"></stop>
<stop offset="50%" stop-color="yellow"></stop>
<stop offset="100" stop-color="seagreen"></stop>
</radialGradient>
</defs>
<g id="g1" class="brightness"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog_mulplayer.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';

var dr = Dr.dr(progress);
dr.path('M0 0 C200 -200,-160 -200,0 0Z').addTo('g1').rotates(5);
dr.path('M-180 0 L-180 180 L180 180 L180 0').id('track').addTo('g2');
dr.path('M-180 0 L-180 180 L180 180 L180 0').id('prog').addTo('g2');

var musics = [
['https://music.163.com/song/media/outer/url?id=2743214030', '美梦必须成真'],
['https://music.163.com/song/media/outer/url?id=2743214872', '无忧梦呓'],
['https://music.163.com/song/media/outer/url?id=2743214873', '玩乐时间'],
['https://music.163.com/song/media/outer/url?id=1809242235', 'Whoopty'],
['https://music.163.com/song/media/outer/url?id=1996633106', 'All Designer(Extended Mix)'],
['https://music.163.com/song/media/outer/url?id=1842561393', 'Today'],
['https://music.163.com/song/media/outer/url?id=1955571906', 'Italia e voi（Reset）'],
['https://music.163.com/song/media/outer/url?id=2072363205', 'Club City'],
['https://music.163.com/song/media/outer/url?id=1485858993', '秋绪'],
['https://music.163.com/song/media/outer/url?id=1436614177', '春弦'],
['https://music.163.com/song/media/outer/url?id=421832', '雪花月'],
['https://music.163.com/song/media/outer/url?id=1890402858', 'Radiant'],
['https://music.163.com/song/media/outer/url?id=1953863738', 'Ständchen'],
['https://music.163.com/song/media/outer/url?id=1955672092', '行文之韵'],
['https://music.163.com/song/media/outer/url?id=2098534321', '宋词之外'],
['https://music.163.com/song/media/outer/url?id=1478093846', '十年人间'],
];

FS(pa, g1, musics);
</script>

马黑黑 发表于 2025-9-28 13:04

pathprog_mulplayer.js 模块和此前常用的路径进度条控制器 pathprog.js 模块一脉相承，不同之处主要是：

（一）CSS代码中，多出几个选择器：

① #mList ：对应音频列表父元素。需要设置的是定位，必要时还有 color、font 之类的；

② #mList > p:hover ：对应音频列表中的 p 标签鼠标移入时的样式。主要设置前景色或自己需要的其它属性设置；

③ .hLight ：对应音频列表中正在播放的 p 标签样式。主要设置前景色 color；

（二）audio 标签可要可不要。当帖子HTML代码中父元素之内有 audio 标签，模块会对它进行操纵，如果没有，模块会生成一份。帖子如果自带 audio 音频标签，所设置的 src 只有在模块出错时有效；

（三）JS代码中，FS() 的参数三个，全是必须参数，第一、二参数和此前的模块一样，分别为帖子父元素、小播标识，第三个元素时音频数组，需要实现声明，格式如下——

var musics = [
   ['音乐地址1', ‘歌名1'],
   ['音乐地址2', ‘歌名2'],
   ['音乐地址3', ‘歌名3'],
   ['音乐地址N', ‘歌名N'],
];

这是二维数组，创建好之后，使用变量名比如这里的 musics 用于 FS() 的第三个参数。注意，创建数组变量在先，传参在后。

马黑黑 发表于 2025-9-28 13:08

本帖最后由马黑黑于 2025-9-28 19:44 编辑

模块对多音频的播放机制：

无人为干预时，随机播放，每一播放周期之内音乐不重复。所谓播放周期，以音乐数量计，例如本例共十六首歌曲，一个播放周期就是16首播完为止。

可以通过列表选择歌曲，点击任意一首，模块将播放这首音乐，播放完毕继续进入当下的随机播放周期。

马黑黑 发表于 2025-9-28 13:08

模块没有对音频播放做出错处理，使用时确保音频链接都是正常的

梦江南 发表于 2025-9-28 13:30

哇，十六首音乐都是163的，问黑黑老师，其他的地址能用吗？混合地址能用吗？{:4_187:}

杨帆发表于 2025-9-28 19:36

经典的多音频播放模块，效果测试完美，为马老师点赞{:4_199:}

马黑黑 发表于 2025-9-28 19:45

梦江南发表于 2025-9-28 13:30
哇，十六首音乐都是163的，问黑黑老师，其他的地址能用吗？混合地址能用吗？
只要能用都行，并不规定只能用谁的音频

马黑黑 发表于 2025-9-28 19:45

杨帆发表于 2025-9-28 19:36
经典的多音频播放模块，效果测试完美，为马老师点赞

发专辑可以考虑用用

杨帆发表于 2025-9-28 20:38

本帖最后由杨帆于 2025-9-28 20:57 编辑

马黑黑发表于 2025-9-28 19:45
发专辑可以考虑用用
谢谢老师~老师封装的模块，相对独立，功能丰富，品质一流，已成为音画人的“东风系列”{:4_205:}

马黑黑 发表于 2025-9-28 21:01

杨帆发表于 2025-9-28 20:38
谢谢老师~老师封装的模块，相对独立，功能丰富，品质一流，已成为音画人的“东风系列”

{:4_172:}

樵歌发表于 2025-9-28 21:04

这个好，这个很好，俺等先小辣椒套用了后，再来量身{:4_189:}感谢马大师为俺们量身订制的漂亮实用代码!

小辣椒 发表于 2025-9-28 21:09

樵歌发表于 2025-9-28 21:04
这个好，这个很好，俺等先小辣椒套用了后，再来量身感谢马大师为俺们量身订制的漂亮实用代码!

哇塞，樵哥哥，刚好，我可以做你的翻唱专辑了，这个套用太简单了，我做一个后，你看看就会了{:4_170:}

小辣椒 发表于 2025-9-28 21:10

黑黑这个多歌曲播放器非常简单而且实用，那些喜欢玩翻唱的有福了，可以轻松套用了

小辣椒 发表于 2025-9-28 21:11

感谢黑黑的分享，现在是越来越厉害了{:4_178:}

马黑黑 发表于 2025-9-28 21:35

小辣椒发表于 2025-9-28 21:11
感谢黑黑的分享，现在是越来越厉害了

哪里哪里？湿湿水的啦

马黑黑 发表于 2025-9-28 21:36

小辣椒发表于 2025-9-28 21:10
黑黑这个多歌曲播放器非常简单而且实用，那些喜欢玩翻唱的有福了，可以轻松套用了

希望能帮到大家

马黑黑 发表于 2025-9-28 21:36

小辣椒发表于 2025-9-28 21:09
哇塞，樵哥哥，刚好，我可以做你的翻唱专辑了，这个套用太简单了，我做一个后，你看看就会了

{:4_190:}

马黑黑 发表于 2025-9-28 21:36

樵歌发表于 2025-9-28 21:04
这个好，这个很好，俺等先小辣椒套用了后，再来量身感谢马大师为俺们量身订制的漂亮实用代码!

{:4_191:}

小辣椒 发表于 2025-9-28 22:40

马黑黑发表于 2025-9-28 21:35
哪里哪里？湿湿水的啦

这个水洒的有点厉害的{:4_189:}

页: [1] 2

花潮论坛's Archiver

杂集（多音频模块测试）