杂集（多音频模块测试）

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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首播完为止。

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