feat: improved first pointerdown/touchstart event listener for better…

… autoplay

plugins/sounds/src/SoundsInstance.ts

@@ -9,20 +9,20 @@ import {
     isNumber,
     itemFromArray,
     itemFromSingleOrMultiple,
+    mouseDownEvent,
     percentDenominator,
+    touchStartEvent,
 } from "@tsparticles/engine";
 import { ImageDisplay, SoundsEventType } from "./enums.js";
 import type { ImageMargins, InitImageData, SoundsContainer } from "./types.js";
+import { getNoteFrequency, isWindowMuted, unmuteWindow } from "./utils.js";
 import type { SoundsAudio } from "./Options/Classes/SoundsAudio.js";
 import type { SoundsNote } from "./Options/Classes/SoundsNote.js";
-import { getNoteFrequency } from "./utils.js";
 
 const zIndexOffset = 1,
     rightOffset = 1,
     minVolume = 0;
 
-let muted = true;
-
 /**
  * @param data -
  * @returns the image element
@@ -131,16 +131,23 @@ export class SoundsInstance implements IContainerPlugin {
             return;
         }
 
-        if (soundsOptions.autoPlay && muted) {
+        if (soundsOptions.autoPlay && isWindowMuted()) {
             const firstClickHandler = (): void => {
-                removeEventListener("click", firstClickHandler);
+                removeEventListener(mouseDownEvent, firstClickHandler);
+                removeEventListener(touchStartEvent, firstClickHandler);
 
-                muted = false;
+                unmuteWindow();
 
                 void this.unmute();
             };
 
-            addEventListener("click", firstClickHandler);
+            const listenerOptions = {
+                capture: true,
+                once: true,
+            };
+
+            addEventListener(mouseDownEvent, firstClickHandler, listenerOptions);
+            addEventListener(touchStartEvent, firstClickHandler, listenerOptions);
         }
 
         this._volume = soundsOptions.volume.value;
@@ -248,7 +255,7 @@ export class SoundsInstance implements IContainerPlugin {
             },
         });
 
-        if (!muted && soundsOptions.autoPlay) {
+        if (!isWindowMuted() && soundsOptions.autoPlay) {
             await this.unmute();
         }
     }

plugins/sounds/src/index.ts

@@ -1,7 +1,25 @@
-import type { Container, Engine, IPlugin, RecursivePartial } from "@tsparticles/engine";
+import {
+    type Container,
+    type Engine,
+    type IPlugin,
+    type RecursivePartial,
+    getLogger,
+    mouseDownEvent,
+    touchStartEvent,
+} from "@tsparticles/engine";
 import type { ISoundsOptions, SoundsOptions } from "./types.js";
 import { Sounds } from "./Options/Classes/Sounds.js";
 import { SoundsInstance } from "./SoundsInstance.js";
+import { unmuteWindow } from "./utils.js";
+
+const generalFirstClickHandler = (): void => {
+    removeEventListener(mouseDownEvent, generalFirstClickHandler);
+    removeEventListener(touchStartEvent, generalFirstClickHandler);
+
+    getLogger().log("sounds", "first click detected, unmuting window");
+
+    unmuteWindow();
+};
 
 /**
  */
@@ -14,6 +32,14 @@ class SoundsPlugin implements IPlugin {
         this.id = "sounds";
 
         this._engine = engine;
+
+        const listenerOptions = {
+            capture: true,
+            once: true,
+        };
+
+        addEventListener(mouseDownEvent, generalFirstClickHandler, listenerOptions);
+        addEventListener(touchStartEvent, generalFirstClickHandler, listenerOptions);
     }
 
     getPlugin(container: Container): SoundsInstance {

plugins/sounds/src/utils.ts

@@ -51,3 +51,13 @@ export function getNoteFrequency(note: string): number | undefined {
 
     return noteItem[parseInt(result[innerGroupKey] || "0")];
 }
+
+let muted = true;
+
+export const isWindowMuted = (): boolean => {
+    return muted;
+};
+
+export const unmuteWindow = (): void => {
+    muted = false;
+};