如何禁用tsParticles烟花预设的音效与音频控件？

问题出在预设配置的优先级高于自定义配置，你直接设置的sounds: { enable: false }会被烟花预设自带的声音配置覆盖。需要通过override字段来强制覆盖预设中的相关设置，同时还要禁用交互触发的声音并隐藏音频控件。

修改后的完整代码如下：

<html>
  <body>
    <div id="tsparticles"></div>

    <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fireworks@2/tsparticles.preset.fireworks.bundle.min.js"></script>

    <script>
      (async () => {
        await tsParticles.load("tsparticles", {
          preset: "fireworks",
          override: {
            sounds: {
              enable: false,
              // 隐藏右上角音频控件
              controls: {
                enable: false
              }
            },
            // 禁用点击触发烟花时的声音
            interactivity: {
              events: {
                onClick: {
                  sounds: []
                }
              }
            }
          }
        });
      })();
    </script>

  </body>
</html>

关键配置说明： #

• override字段：用于覆盖预设中的配置，优先级高于预设本身，确保你的声音禁用设置生效。
• sounds.enable: false：全局禁用所有音效。
• sounds.controls.enable: false：隐藏右上角的音频控制按钮。
• interactivity.events.onClick.sounds: []：清空点击触发烟花时的关联音效，避免预设中绑定的点击声音生效。

内容的提问来源于stack exchange，提问作者Josh