tsParticles Sounds 插件配置完全指南为粒子事件绑定音频播放与合成音效【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticlestsparticles/plugin-sounds是 tsParticles 生态中负责音频播放的插件它将粒子动画的事件系统与 Web Audio API 打通当粒子交互、容器生命周期等事件被触发时自动播放预先加载的音频文件或者用正弦波实时合成音符与旋律并额外提供音量调节与静音切换的界面图标。本文以 markdown/Options/Plugins/Sounds.md 为骨架结合plugins/sounds包的源码实现完整讲解sounds配置项的每一个字段、默认值与底层行为读完你可以在自己的粒子配置中直接复刻出带声音反馈的交互场景。一、插件定位与启用方式sounds插件本身不改变粒子的渲染逻辑它只负责听——监听引擎派发的事件在满足条件时通过 SoundsPluginInstance 播放音频。配置入口是顶层sounds键对应实现类 Sounds.ts。使用前需要先加载插件且必须在tsParticles.load(...)之前调用加载函数这是 README 与源码双重确认的硬性顺序要求见 plugins/sounds/README.mdnpm install tsparticles/plugin-soundsimport { tsParticles } from tsparticles/engine; import { loadSoundsPlugin } from tsparticles/plugin-sounds; (async () { await loadSoundsPlugin(tsParticles); await tsParticles.load({ id: tsparticles, options: { /* 含 sounds 配置的选项对象 */ }, }); })();CDN 方式则引入tsparticles.plugin.sounds.min.js后使用其导出的loadSoundsPlugin函数。插件启用后sounds.enable仍须显式设为true默认false否则 SoundsPluginInstance.init() 会直接返回不执行任何音频逻辑。二、sounds 顶层配置速查sounds对象共五个字段与原文档的属性表完全对应默认值均来自 Sounds.ts属性类型默认值说明autoPlaybooleantrue初始化后是否自动开始播放受浏览器自动播放策略约束详见第八节enablebooleanfalse是否启用 sounds 插件总开关eventsSoundsEvent[][]声音事件定义数组每个元素描述什么事件触发什么声音iconsSoundsIcons{}静音/音量控制图标的配置含自己的默认值与加载器volumeSoundsVolume{}全局/默认音量选项同样有独立默认值与加载器从加载器实现看Sounds.tsautoPlay与enable是平铺的布尔值events数组中的每个元素会被映射为SoundsEvent实例并逐个load()icons和volume则是嵌套选项对象即使配置中不写也各自带有内置默认值详见第四、五、六节。值得注意的是events使用整体替换而非合并this.events data.events.map(...)这意味着配置中的events会覆盖默认空数组而icons、volume走增量加载未写的子字段保留默认值。三、volume全局音量配置volume字段对应 SoundsVolume.ts控制音量大小、调节步长与上下限全部以百分比0–100为量纲属性类型默认值说明valuenumber100默认音量百分比初始化时写入实例的#volumeminnumber0音量下限调节时会被clamp限制maxnumber100音量上限stepnumber10每次点击音量 /- 图标的增减幅度一个方便的细节load()同时支持对象与裸数字两种写法——volume: 80会被等价解析为{ value: 80 }其余字段保持默认SoundsVolume.ts。在底层音量通过 Web Audio 的GainNode实现取消静音时gain.gain.value soundsOptions.volume.value / percentDenominator即value / 100见 SoundsPluginInstance.ts每次volumeUp()/volumeDown()按step增减#volume经clamp(this.#volume, min, max)约束后再换算为 gain 值SoundsPluginInstance.ts。特别地当音量降到 0 时会自动进入静音状态再次调高时自动恢复播放并且会同步刷新图标状态。四、events事件与声音的绑定events是 sounds 插件的核心数组中的每个元素对应 SoundsEvent.ts字段如下属性类型说明eventstring \| string[]要监听的引擎事件名可以是单个或多个内部用executeOnSingleOrMultiple注册audioSoundsAudio \| SoundsAudio[]播放的音频文件定义URL 与是否循环可单个或多个随机取一notesSoundsNote[]音符序列用合成器按序播放melodiesSoundsMelody[]旋律定义音符的集合可嵌套与循环每次随机取一条filterFilterFunction可选过滤函数返回false时本次触发不播放触发时的播放优先级从 SoundsPluginInstance.#initEvents() 可以清晰看到event.audio存在则播放缓冲音频否则若定义了melodies则随机挑一条旋律播放否则若定义了notes则随机挑一个音符播放。三者按audio → melodies → notes的次序判定配置时不要混用以免互相遮蔽。4.1 事件与过滤条件插件通过this.#engine.addEventListener(item, cb)将回调注册到引擎事件系统回调收到CustomEventArgs含container等信息。回调内部首先校验事件所属容器、静音状态与销毁状态然后执行过滤{ events: [ { event: particleClicked, filter: mySoundFilter, audio: { source: sounds/click.mp3 } } ] }filter支持两种写法SoundsEvent.ts直接传入函数或传入字符串——字符串会被当作globalThis上的全局函数名解析解析不到或不是函数则静默忽略。使用字符串写法时务必保证函数在全局作用域可访问。4.2 audio播放音频文件audio对应 SoundsAudio.ts字段极简属性类型默认值说明sourcestring音频文件 URL支持相对路径与绝对 URLloopbooleanfalse是否循环播放同样支持简写audio: sounds/burst.mp3等价于{ source: sounds/burst.mp3 }。音频在init()阶段就被fetch拉取并通过decodeAudioData解码为AudioBuffer存入audioMap键为 URL播放时直接从缓冲区读取避免触发时再加载造成的延迟SoundsPluginInstance.ts。需要注意的是如果fetch响应不 OK!response.ok该音频会被直接跳过且不报错因此要保证source指向的资源可访问。五、notes 与 melodies用 Web Audio 合成音效除了播放音频文件sounds 插件还能用振荡器实时合成音效这对应notes与melodies两个字段。5.1 音符SoundsNoteSoundsNote.ts 只有两个字段属性类型默认值说明valuestring \| string[][]音名可多个播放时随机取一durationnumber500单音符持续时长毫秒value使用音名 八度数字格式如C4、Ab3特殊值pause表示休止。解析逻辑在 plugins/sounds/src/utils.ts正则/(([A-G]b?)(\d))|pause/i提取音名与八度再到频率表查表。频率表覆盖 C、Db、D、Eb、E、F、Gb、G、Ab、A、Bb、B 十二个音名每个音名 9 个八度0–8例如中央 CC4对应 261.63 HzA4对应 440 Hz标准音。播放时每个音符创建一个sine波形的OscillatorNodefrequency设为查表频率持续duration毫秒后移除声源节点SoundsPluginInstance.#playFrequency。5.2 旋律SoundsMelodySoundsMelody.ts 将多个音符组织成可复用的旋律属性类型默认值说明notesSoundsNote[][]构成旋律的音符序列melodiesSoundsMelody[][]嵌套的子旋律用于组合复杂结构loopbooleanfalse是否循环播放整条旋律loop为true时音符播完后通过取模回到序列开头继续播放SoundsPluginInstance.ts每个事件触发时会从melodies数组中随机挑选一条。下面是一个事件触发即播放琶音的示例{ events: [ { event: particleClicked, melodies: [ { loop: false, notes: [ { value: C4, duration: 200 }, { value: E4, duration: 200 }, { value: G4, duration: 200 }, { value: C5, duration: 400 } ] } ] } ] }六、icons音量控制图标的定制sounds.icons对应 SoundsIcons.ts用于在画布右上角渲染静音/取消静音/音量增减四个可点击图标字段如下属性类型默认值说明enablebooleanfalse是否显示图标关闭时图标仍创建但display: nonemuteSoundsIcon内置 SVG静音图标unmuteSoundsIcon内置 SVG取消静音图标volumeDownSoundsIcon内置 SVG音量减图标volumeUpSoundsIcon内置 SVG音量加图标每个图标是 SoundsIcon.ts 的实例属性类型默认值说明svgstring内置白色 SVGSVG 源码字符串base64 编码后作为img.srcpathstring无图片路径优先于svg使用widthnumber24图标宽度像素heightnumber24图标高度像素stylestring追加到图标元素的 CSS 文本四个图标默认内置了风格统一的白色 SVG见 SoundsIcons.ts不配置也能直接工作。图标以position: absolute定位在画布右上角zIndex为options.fullScreen.zIndex 1始终浮在粒子层之上SoundsPluginInstance.ts点击mute/unmute切换静音状态点击volumeDown/volumeUp按step调节音量图标显隐会随状态实时切换SoundsPluginInstance.ts。七、完整配置示例结合以上全部字段一个可运行的完整配置如下在浏览器策略允许的环境下点击粒子即可听到音效 琶音组合反馈{ fullScreen: { enable: true, zIndex: -1 }, sounds: { enable: true, autoPlay: true, volume: { value: 70, min: 0, max: 100, step: 10 }, icons: { enable: true, mute: { svg: svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24path fill#fff dM19.7 5.3l-1.4-1.4L7 15.2V7H5v10H3v-6H1v8h2v2h2v-2h2v-6h2v8h2v-8h2v2h2v-2h2v-2h2z//svg }, unmute: {}, volumeDown: {}, volumeUp: {} }, events: [ { event: particleClicked, audio: { source: sounds/burst.mp3, loop: false } }, { event: particleCreated, melodies: [ { loop: false, notes: [ { value: G4, duration: 150 }, { value: E4, duration: 150 }, { value: C4, duration: 300 } ] } ] } ] } }八、运行机制与浏览器自动播放策略理解插件的运行机制有助于排查问题整个生命周期在 SoundsPluginInstance.ts 中清晰可见初始化init先检查sounds.enable随后若autoPlay为true且窗口处于静音态注册一次性mousedown/touchstart监听等待用户首次交互后取消静音这是对浏览器自动播放策略的标准规避做法接着遍历events预取并解码所有audio.source到AudioBuffer缓存。启动start初始化container.muted true在画布右上角创建四个图标若窗口未静音且autoPlay立即执行取消静音。事件监听#initEvents为每个event注册引擎事件回调回调内先做容器归属、静音/销毁、filter三道检查再按audio → melodies → notes优先级播放。音量与静音所有声源统一经GainNode输出value / 100换算为增益静音时suspend音频上下文并关闭所有声源节点同时向容器派发soundsMuted/soundsUnmuted事件枚举见 plugins/sounds/src/enums.ts供外部监听同步 UI 状态。两点环境前提值得注意插件依赖浏览器 Web Audio APIAudioContext、AudioBufferSourceNode、OscillatorNode等autoPlay的自动受制于浏览器自动播放策略插件通过首次点击/触摸解锁窗口因此测试时若听不到声音先进行一次页面交互。九、常见问题与调试建议结合 README 的 pitfalls 列表与源码行为遇到没声音时按以下顺序排查enable未开启sounds.enable默认falseinit()会直接返回这是最常见的遗漏。插件加载顺序错误必须在tsParticles.load(...)之前await loadSoundsPlugin(tsParticles)否则sounds配置不会被解析。音频文件加载失败init()中fetch失败非 2xx 响应的音频会被静默跳过检查source路径是否正确、是否跨域受限。filter字符串写法失效字符串会被解析为globalThis上的函数需确认函数全局可见或者直接传函数引用。事件名不匹配event必须使用引擎实际派发的事件名写错则回调永不触发。静音状态误判容器初始muted trueautoPlay依赖窗口解锁也可通过点击unmute图标手动恢复。以上所有字段的默认值、加载逻辑与运行时行为均可在 plugins/sounds/src/Options/Classes 下的类文件与 SoundsPluginInstance.ts 中逐一核对按需修改events、volume、icons三组配置即可把粒子动画变成有声有色的交互动效。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 tsParticles Sounds 插件配置完全指南：为粒子事件绑定音频播放与合成音效
tsParticles Sounds 插件配置完全指南为粒子事件绑定音频播放与合成音效【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticlestsparticles/plugin-sounds是 tsParticles 生态中负责音频播放的插件它将粒子动画的事件系统与 Web Audio API 打通当粒子交互、容器生命周期等事件被触发时自动播放预先加载的音频文件或者用正弦波实时合成音符与旋律并额外提供音量调节与静音切换的界面图标。本文以 markdown/Options/Plugins/Sounds.md 为骨架结合plugins/sounds包的源码实现完整讲解sounds配置项的每一个字段、默认值与底层行为读完你可以在自己的粒子配置中直接复刻出带声音反馈的交互场景。一、插件定位与启用方式sounds插件本身不改变粒子的渲染逻辑它只负责听——监听引擎派发的事件在满足条件时通过 SoundsPluginInstance 播放音频。配置入口是顶层sounds键对应实现类 Sounds.ts。使用前需要先加载插件且必须在tsParticles.load(...)之前调用加载函数这是 README 与源码双重确认的硬性顺序要求见 plugins/sounds/README.mdnpm install tsparticles/plugin-soundsimport { tsParticles } from tsparticles/engine; import { loadSoundsPlugin } from tsparticles/plugin-sounds; (async () { await loadSoundsPlugin(tsParticles); await tsParticles.load({ id: tsparticles, options: { /* 含 sounds 配置的选项对象 */ }, }); })();CDN 方式则引入tsparticles.plugin.sounds.min.js后使用其导出的loadSoundsPlugin函数。插件启用后sounds.enable仍须显式设为true默认false否则 SoundsPluginInstance.init() 会直接返回不执行任何音频逻辑。二、sounds 顶层配置速查sounds对象共五个字段与原文档的属性表完全对应默认值均来自 Sounds.ts属性类型默认值说明autoPlaybooleantrue初始化后是否自动开始播放受浏览器自动播放策略约束详见第八节enablebooleanfalse是否启用 sounds 插件总开关eventsSoundsEvent[][]声音事件定义数组每个元素描述什么事件触发什么声音iconsSoundsIcons{}静音/音量控制图标的配置含自己的默认值与加载器volumeSoundsVolume{}全局/默认音量选项同样有独立默认值与加载器从加载器实现看Sounds.tsautoPlay与enable是平铺的布尔值events数组中的每个元素会被映射为SoundsEvent实例并逐个load()icons和volume则是嵌套选项对象即使配置中不写也各自带有内置默认值详见第四、五、六节。值得注意的是events使用整体替换而非合并this.events data.events.map(...)这意味着配置中的events会覆盖默认空数组而icons、volume走增量加载未写的子字段保留默认值。三、volume全局音量配置volume字段对应 SoundsVolume.ts控制音量大小、调节步长与上下限全部以百分比0–100为量纲属性类型默认值说明valuenumber100默认音量百分比初始化时写入实例的#volumeminnumber0音量下限调节时会被clamp限制maxnumber100音量上限stepnumber10每次点击音量 /- 图标的增减幅度一个方便的细节load()同时支持对象与裸数字两种写法——volume: 80会被等价解析为{ value: 80 }其余字段保持默认SoundsVolume.ts。在底层音量通过 Web Audio 的GainNode实现取消静音时gain.gain.value soundsOptions.volume.value / percentDenominator即value / 100见 SoundsPluginInstance.ts每次volumeUp()/volumeDown()按step增减#volume经clamp(this.#volume, min, max)约束后再换算为 gain 值SoundsPluginInstance.ts。特别地当音量降到 0 时会自动进入静音状态再次调高时自动恢复播放并且会同步刷新图标状态。四、events事件与声音的绑定events是 sounds 插件的核心数组中的每个元素对应 SoundsEvent.ts字段如下属性类型说明eventstring \| string[]要监听的引擎事件名可以是单个或多个内部用executeOnSingleOrMultiple注册audioSoundsAudio \| SoundsAudio[]播放的音频文件定义URL 与是否循环可单个或多个随机取一notesSoundsNote[]音符序列用合成器按序播放melodiesSoundsMelody[]旋律定义音符的集合可嵌套与循环每次随机取一条filterFilterFunction可选过滤函数返回false时本次触发不播放触发时的播放优先级从 SoundsPluginInstance.#initEvents() 可以清晰看到event.audio存在则播放缓冲音频否则若定义了melodies则随机挑一条旋律播放否则若定义了notes则随机挑一个音符播放。三者按audio → melodies → notes的次序判定配置时不要混用以免互相遮蔽。4.1 事件与过滤条件插件通过this.#engine.addEventListener(item, cb)将回调注册到引擎事件系统回调收到CustomEventArgs含container等信息。回调内部首先校验事件所属容器、静音状态与销毁状态然后执行过滤{ events: [ { event: particleClicked, filter: mySoundFilter, audio: { source: sounds/click.mp3 } } ] }filter支持两种写法SoundsEvent.ts直接传入函数或传入字符串——字符串会被当作globalThis上的全局函数名解析解析不到或不是函数则静默忽略。使用字符串写法时务必保证函数在全局作用域可访问。4.2 audio播放音频文件audio对应 SoundsAudio.ts字段极简属性类型默认值说明sourcestring音频文件 URL支持相对路径与绝对 URLloopbooleanfalse是否循环播放同样支持简写audio: sounds/burst.mp3等价于{ source: sounds/burst.mp3 }。音频在init()阶段就被fetch拉取并通过decodeAudioData解码为AudioBuffer存入audioMap键为 URL播放时直接从缓冲区读取避免触发时再加载造成的延迟SoundsPluginInstance.ts。需要注意的是如果fetch响应不 OK!response.ok该音频会被直接跳过且不报错因此要保证source指向的资源可访问。五、notes 与 melodies用 Web Audio 合成音效除了播放音频文件sounds 插件还能用振荡器实时合成音效这对应notes与melodies两个字段。5.1 音符SoundsNoteSoundsNote.ts 只有两个字段属性类型默认值说明valuestring \| string[][]音名可多个播放时随机取一durationnumber500单音符持续时长毫秒value使用音名 八度数字格式如C4、Ab3特殊值pause表示休止。解析逻辑在 plugins/sounds/src/utils.ts正则/(([A-G]b?)(\d))|pause/i提取音名与八度再到频率表查表。频率表覆盖 C、Db、D、Eb、E、F、Gb、G、Ab、A、Bb、B 十二个音名每个音名 9 个八度0–8例如中央 CC4对应 261.63 HzA4对应 440 Hz标准音。播放时每个音符创建一个sine波形的OscillatorNodefrequency设为查表频率持续duration毫秒后移除声源节点SoundsPluginInstance.#playFrequency。5.2 旋律SoundsMelodySoundsMelody.ts 将多个音符组织成可复用的旋律属性类型默认值说明notesSoundsNote[][]构成旋律的音符序列melodiesSoundsMelody[][]嵌套的子旋律用于组合复杂结构loopbooleanfalse是否循环播放整条旋律loop为true时音符播完后通过取模回到序列开头继续播放SoundsPluginInstance.ts每个事件触发时会从melodies数组中随机挑选一条。下面是一个事件触发即播放琶音的示例{ events: [ { event: particleClicked, melodies: [ { loop: false, notes: [ { value: C4, duration: 200 }, { value: E4, duration: 200 }, { value: G4, duration: 200 }, { value: C5, duration: 400 } ] } ] } ] }六、icons音量控制图标的定制sounds.icons对应 SoundsIcons.ts用于在画布右上角渲染静音/取消静音/音量增减四个可点击图标字段如下属性类型默认值说明enablebooleanfalse是否显示图标关闭时图标仍创建但display: nonemuteSoundsIcon内置 SVG静音图标unmuteSoundsIcon内置 SVG取消静音图标volumeDownSoundsIcon内置 SVG音量减图标volumeUpSoundsIcon内置 SVG音量加图标每个图标是 SoundsIcon.ts 的实例属性类型默认值说明svgstring内置白色 SVGSVG 源码字符串base64 编码后作为img.srcpathstring无图片路径优先于svg使用widthnumber24图标宽度像素heightnumber24图标高度像素stylestring追加到图标元素的 CSS 文本四个图标默认内置了风格统一的白色 SVG见 SoundsIcons.ts不配置也能直接工作。图标以position: absolute定位在画布右上角zIndex为options.fullScreen.zIndex 1始终浮在粒子层之上SoundsPluginInstance.ts点击mute/unmute切换静音状态点击volumeDown/volumeUp按step调节音量图标显隐会随状态实时切换SoundsPluginInstance.ts。七、完整配置示例结合以上全部字段一个可运行的完整配置如下在浏览器策略允许的环境下点击粒子即可听到音效 琶音组合反馈{ fullScreen: { enable: true, zIndex: -1 }, sounds: { enable: true, autoPlay: true, volume: { value: 70, min: 0, max: 100, step: 10 }, icons: { enable: true, mute: { svg: svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 24 24path fill#fff dM19.7 5.3l-1.4-1.4L7 15.2V7H5v10H3v-6H1v8h2v2h2v-2h2v-6h2v8h2v-8h2v2h2v-2h2v-2h2z//svg }, unmute: {}, volumeDown: {}, volumeUp: {} }, events: [ { event: particleClicked, audio: { source: sounds/burst.mp3, loop: false } }, { event: particleCreated, melodies: [ { loop: false, notes: [ { value: G4, duration: 150 }, { value: E4, duration: 150 }, { value: C4, duration: 300 } ] } ] } ] } }八、运行机制与浏览器自动播放策略理解插件的运行机制有助于排查问题整个生命周期在 SoundsPluginInstance.ts 中清晰可见初始化init先检查sounds.enable随后若autoPlay为true且窗口处于静音态注册一次性mousedown/touchstart监听等待用户首次交互后取消静音这是对浏览器自动播放策略的标准规避做法接着遍历events预取并解码所有audio.source到AudioBuffer缓存。启动start初始化container.muted true在画布右上角创建四个图标若窗口未静音且autoPlay立即执行取消静音。事件监听#initEvents为每个event注册引擎事件回调回调内先做容器归属、静音/销毁、filter三道检查再按audio → melodies → notes优先级播放。音量与静音所有声源统一经GainNode输出value / 100换算为增益静音时suspend音频上下文并关闭所有声源节点同时向容器派发soundsMuted/soundsUnmuted事件枚举见 plugins/sounds/src/enums.ts供外部监听同步 UI 状态。两点环境前提值得注意插件依赖浏览器 Web Audio APIAudioContext、AudioBufferSourceNode、OscillatorNode等autoPlay的自动受制于浏览器自动播放策略插件通过首次点击/触摸解锁窗口因此测试时若听不到声音先进行一次页面交互。九、常见问题与调试建议结合 README 的 pitfalls 列表与源码行为遇到没声音时按以下顺序排查enable未开启sounds.enable默认falseinit()会直接返回这是最常见的遗漏。插件加载顺序错误必须在tsParticles.load(...)之前await loadSoundsPlugin(tsParticles)否则sounds配置不会被解析。音频文件加载失败init()中fetch失败非 2xx 响应的音频会被静默跳过检查source路径是否正确、是否跨域受限。filter字符串写法失效字符串会被解析为globalThis上的函数需确认函数全局可见或者直接传函数引用。事件名不匹配event必须使用引擎实际派发的事件名写错则回调永不触发。静音状态误判容器初始muted trueautoPlay依赖窗口解锁也可通过点击unmute图标手动恢复。以上所有字段的默认值、加载逻辑与运行时行为均可在 plugins/sounds/src/Options/Classes 下的类文件与 SoundsPluginInstance.ts 中逐一核对按需修改events、volume、icons三组配置即可把粒子动画变成有声有色的交互动效。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考