@tsparticles/plugin-sounds 3.0.2 → 3.1.0

package/types/Options/Interfaces/ISoundsIcons.d.ts

@@ -1,5 +1,6 @@
 import type { ISoundsIcon } from "./ISoundsIcon.js";
 export interface ISoundsIcons {
+    enable: boolean;
     mute: ISoundsIcon;
     unmute: ISoundsIcon;
     volumeDown: ISoundsIcon;

package/types/SoundsInstance.d.ts

@@ -13,10 +13,16 @@ export declare class SoundsInstance implements IContainerPlugin {
     private _volumeUpImg?;
     constructor(container: SoundsContainer, engine: Engine);
     init(): Promise<void>;
+    mute(): Promise<void>;
     start(): Promise<void>;
     stop(): void;
+    toggleMute(): Promise<void>;
+    unmute(): Promise<void>;
+    volumeDown(): Promise<void>;
+    volumeUp(): Promise<void>;
     private readonly _addBuffer;
     private readonly _addOscillator;
+    private _getAudioContext;
     private readonly _initEvents;
     private readonly _mute;
     private readonly _playBuffer;

package/types/index.d.ts

@@ -1,2 +1,2 @@
-import type { Engine } from "@tsparticles/engine";
+import { type Engine } from "@tsparticles/engine";
 export declare function loadSoundsPlugin(engine: Engine, refresh?: boolean): Promise<void>;

package/types/types.d.ts

@@ -15,12 +15,12 @@ export type SoundsContainer = Container & {
     audioContext?: AudioContext;
     muted?: boolean;
 };
-export type ImageMargins = {
+export interface ImageMargins {
     right: number;
     top: number;
-};
-export type InitImageData = {
-    clickCb: () => void;
+}
+export interface InitImageData {
+    clickCb: () => Promise<void>;
     container: SoundsContainer;
     display: ImageDisplay;
     iconOptions: SoundsIcon;
@@ -28,4 +28,4 @@ export type InitImageData = {
     options: Options;
     pos: ImageMargins;
     rightOffsets: number[];
-};
+}

package/types/utils.d.ts

@@ -1 +1,3 @@
 export declare function getNoteFrequency(note: string): number | undefined;
+export declare const isWindowMuted: () => boolean;
+export declare const unmuteWindow: () => void;

package/umd/Options/Classes/Sounds.js

@@ -15,6 +15,7 @@
     const SoundsVolume_js_1 = require("./SoundsVolume.js");
     class Sounds {
         constructor() {
+            this.autoPlay = true;
             this.enable = false;
             this.events = [];
             this.icons = new SoundsIcons_js_1.SoundsIcons();
@@ -24,6 +25,9 @@
             if (!data) {
                 return;
             }
+            if (data.autoPlay !== undefined) {
+                this.autoPlay = data.autoPlay;
+            }
             if (data.enable !== undefined) {
                 this.enable = data.enable;
             }

package/umd/Options/Classes/SoundsEvent.js

@@ -53,10 +53,11 @@
                     return tmp;
                 });
             }
-            if (data.filter !== undefined) {
+            if (data.filter) {
                 if ((0, engine_1.isString)(data.filter)) {
-                    if ((0, engine_1.isFunction)(window[data.filter])) {
-                        this.filter = window[data.filter];
+                    const filterFunc = window[data.filter];
+                    if ((0, engine_1.isFunction)(filterFunc)) {
+                        this.filter = filterFunc;
                     }
                 }
                 else {

package/umd/Options/Classes/SoundsIcon.js

@@ -14,6 +14,7 @@
         constructor() {
             this.width = 24;
             this.height = 24;
+            this.style = "";
         }
         load(data) {
             if (!data) {

package/umd/Options/Classes/SoundsIcons.js

@@ -17,6 +17,7 @@
             this.unmute = new SoundsIcon_js_1.SoundsIcon();
             this.volumeDown = new SoundsIcon_js_1.SoundsIcon();
             this.volumeUp = new SoundsIcon_js_1.SoundsIcon();
+            this.enable = false;
             this.mute.svg = `<?xml version="1.0"?>
 <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"
     xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
@@ -58,6 +59,9 @@
             if (!data) {
                 return;
             }
+            if (data.enable !== undefined) {
+                this.enable = data.enable;
+            }
             this.mute.load(data.mute);
             this.unmute.load(data.unmute);
             this.volumeDown.load(data.volumeDown);

package/umd/SoundsInstance.js

@@ -12,13 +12,19 @@
     exports.SoundsInstance = void 0;
     const engine_1 = require("@tsparticles/engine");
     const utils_js_1 = require("./utils.js");
+    const zIndexOffset = 1, rightOffset = 1, minVolume = 0;
     function initImage(data) {
-        const img = document.createElement("img"), { clickCb, container, display, iconOptions, margin, options, pos, rightOffsets } = data, { width, path, svg } = iconOptions;
-        setIconStyle(img, pos.top + margin, pos.right - (margin * (rightOffsets.length + 1) + width + rightOffsets.reduce((a, b) => a + b, 0)), display, options.fullScreen.zIndex + 1, width, margin);
+        const img = document.createElement("img"), { clickCb, container, display, iconOptions, margin, options, pos, rightOffsets } = data, { width, path, style, svg } = iconOptions, defaultAccumulator = 0;
+        setIconStyle(img, pos.top + margin, pos.right -
+            (margin * (rightOffsets.length + rightOffset) +
+                width +
+                rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style);
         img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : "");
-        const parent = container.canvas.element?.parentNode || document.body;
+        const parent = container.canvas.element?.parentNode ?? document.body;
         parent.append(img);
-        img.addEventListener("click", clickCb);
+        img.addEventListener("click", () => {
+            void clickCb();
+        });
         return img;
     }
     function removeImage(image) {
@@ -27,14 +33,15 @@
         }
         image.remove();
     }
-    function setIconStyle(icon, top, left, display, zIndex, width, margin) {
+    function setIconStyle(icon, top, left, display, zIndex, width, margin, style) {
         icon.style.userSelect = "none";
         icon.style.webkitUserSelect = "none";
         icon.style.position = "absolute";
         icon.style.top = `${top + margin}px`;
         icon.style.left = `${left - margin - width}px`;
         icon.style.display = display;
-        icon.style.zIndex = `${zIndex + 1}`;
+        icon.style.zIndex = `${zIndex + zIndexOffset}`;
+        icon.style.cssText += style;
     }
     class SoundsInstance {
         constructor(container, engine) {
@@ -55,12 +62,12 @@
                 }
                 for (const event of soundsOptions.events) {
                     const cb = (args) => {
-                        (async () => {
+                        void (async () => {
                             const filterNotValid = event.filter && !event.filter(args);
                             if (this._container !== args.container) {
                                 return;
                             }
-                            if (!this._container || this._container.muted || this._container.destroyed) {
+                            if (!this._container || !!this._container.muted || this._container.destroyed) {
                                 (0, engine_1.executeOnSingleOrMultiple)(event.event, (item) => {
                                     this._engine.removeEventListener(item, cb);
                                 });
@@ -69,21 +76,22 @@
                             if (filterNotValid) {
                                 return;
                             }
+                            const defaultNoteIndex = 0;
                             if (event.audio) {
                                 this._playBuffer((0, engine_1.itemFromSingleOrMultiple)(event.audio));
                             }
                             else if (event.melodies) {
                                 const melody = (0, engine_1.itemFromArray)(event.melodies);
                                 if (melody.melodies.length) {
-                                    await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop)));
+                                    await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, defaultNoteIndex, melody.loop)));
                                 }
                                 else {
-                                    await this._playNote(melody.notes, 0, melody.loop);
+                                    await this._playNote(melody.notes, defaultNoteIndex, melody.loop);
                                 }
                             }
                             else if (event.notes) {
                                 const note = (0, engine_1.itemFromArray)(event.notes);
-                                await this._playNote([note], 0, false);
+                                await this._playNote([note], defaultNoteIndex, false);
                             }
                         })();
                     };
@@ -92,18 +100,15 @@
                     });
                 }
             };
-            this._mute = () => {
-                const container = this._container;
-                if (!container.audioContext) {
-                    return;
-                }
+            this._mute = async () => {
+                const container = this._container, audioContext = this._getAudioContext();
                 for (const source of this._audioSources) {
                     this._removeAudioSource(source);
                 }
                 if (this._gain) {
                     this._gain.disconnect();
                 }
-                container.audioContext.close();
+                await audioContext.close();
                 container.audioContext = undefined;
                 this._engine.dispatchEvent("soundsMuted", { container: this._container });
             };
@@ -123,10 +128,10 @@
                 source.start();
             };
             this._playFrequency = async (frequency, duration) => {
-                if (!this._container.audioContext || !this._gain) {
+                if (!this._gain || this._container.muted) {
                     return;
                 }
-                const oscillator = this._addOscillator(this._container.audioContext);
+                const audioContext = this._getAudioContext(), oscillator = this._addOscillator(audioContext);
                 oscillator.connect(this._gain);
                 oscillator.type = "sine";
                 oscillator.frequency.value = frequency;
@@ -139,14 +144,13 @@
                 });
             };
             this._playMuteSound = () => {
-                const container = this._container;
-                if (!container.audioContext) {
+                if (this._container.muted) {
                     return;
                 }
-                const gain = container.audioContext.createGain();
-                gain.connect(container.audioContext.destination);
+                const audioContext = this._getAudioContext(), gain = audioContext.createGain();
+                gain.connect(audioContext.destination);
                 gain.gain.value = 0;
-                const oscillator = container.audioContext.createOscillator();
+                const oscillator = audioContext.createOscillator();
                 oscillator.connect(gain);
                 oscillator.type = "sine";
                 oscillator.frequency.value = 1;
@@ -170,7 +174,8 @@
                     return this._playNoteValue(notes, noteIdx, idx);
                 });
                 await ((0, engine_1.isArray)(promises) ? Promise.allSettled(promises) : promises);
-                let nextNoteIdx = noteIdx + 1;
+                const indexOffset = 1;
+                let nextNoteIdx = noteIdx + indexOffset;
                 if (loop && nextNoteIdx >= notes.length) {
                     nextNoteIdx = nextNoteIdx % notes.length;
                 }
@@ -199,29 +204,31 @@
             this._removeAudioSource = (source) => {
                 source.stop();
                 source.disconnect();
-                this._audioSources.splice(this._audioSources.indexOf(source), 1);
+                const deleteCount = 1;
+                this._audioSources.splice(this._audioSources.indexOf(source), deleteCount);
             };
             this._unmute = () => {
                 const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
                 if (!soundsOptions) {
                     return;
                 }
-                if (!container.audioContext) {
-                    container.audioContext = new AudioContext();
-                }
-                const { audioContext } = container;
+                const audioContext = this._getAudioContext();
                 if (!this._audioSources) {
                     this._audioSources = [];
                 }
                 const gain = audioContext.createGain();
                 gain.connect(audioContext.destination);
-                gain.gain.value = soundsOptions.volume.value / 100;
+                gain.gain.value = soundsOptions.volume.value / engine_1.percentDenominator;
                 this._gain = gain;
                 this._initEvents();
                 this._engine.dispatchEvent("soundsUnmuted", { container: this._container });
             };
             this._updateMuteIcons = () => {
-                const container = this._container, muteImg = this._muteImg, unmuteImg = this._unmuteImg;
+                const container = this._container, soundsOptions = container.actualOptions.sounds;
+                if (!soundsOptions?.enable || !soundsOptions.icons.enable) {
+                    return;
+                }
+                const muteImg = this._muteImg, unmuteImg = this._unmuteImg;
                 if (muteImg) {
                     muteImg.style.display = container.muted ? "block" : "none";
                 }
@@ -230,13 +237,13 @@
                 }
             };
             this._updateMuteStatus = async () => {
-                const container = this._container;
+                const container = this._container, audioContext = this._getAudioContext();
                 if (container.muted) {
-                    await container.audioContext?.suspend();
-                    this._mute();
+                    await audioContext?.suspend();
+                    await this._mute();
                 }
                 else {
-                    await container.audioContext?.resume();
+                    await audioContext?.resume();
                     this._unmute();
                     this._playMuteSound();
                 }
@@ -248,12 +255,12 @@
                 }
                 (0, engine_1.clamp)(this._volume, soundsOptions.volume.min, soundsOptions.volume.max);
                 let stateChanged = false;
-                if (this._volume <= 0 && !container.muted) {
+                if (this._volume <= minVolume && !container.muted) {
                     this._volume = 0;
                     container.muted = true;
                     stateChanged = true;
                 }
-                else if (this._volume > 0 && container.muted) {
+                else if (this._volume > minVolume && container.muted) {
                     container.muted = false;
                     stateChanged = true;
                 }
@@ -262,7 +269,7 @@
                     await this._updateMuteStatus();
                 }
                 if (this._gain?.gain) {
-                    this._gain.gain.value = this._volume / 100;
+                    this._gain.gain.value = this._volume / engine_1.percentDenominator;
                 }
             };
             this._container = container;
@@ -276,6 +283,20 @@
             if (!soundsOptions?.enable) {
                 return;
             }
+            if (soundsOptions.autoPlay && (0, utils_js_1.isWindowMuted)()) {
+                const firstClickHandler = () => {
+                    removeEventListener(engine_1.mouseDownEvent, firstClickHandler);
+                    removeEventListener(engine_1.touchStartEvent, firstClickHandler);
+                    (0, utils_js_1.unmuteWindow)();
+                    void this.unmute();
+                };
+                const listenerOptions = {
+                    capture: true,
+                    once: true,
+                };
+                addEventListener(engine_1.mouseDownEvent, firstClickHandler, listenerOptions);
+                addEventListener(engine_1.touchStartEvent, firstClickHandler, listenerOptions);
+            }
             this._volume = soundsOptions.volume.value;
             const events = soundsOptions.events;
             this._audioMap = new Map();
@@ -283,16 +304,25 @@
                 if (!event.audio) {
                     continue;
                 }
-                (0, engine_1.executeOnSingleOrMultiple)(event.audio, async (audio) => {
+                const promises = (0, engine_1.executeOnSingleOrMultiple)(event.audio, async (audio) => {
                     const response = await fetch(audio.source);
                     if (!response.ok) {
                         return;
                     }
-                    const arrayBuffer = await response.arrayBuffer();
-                    container.audioContext = new AudioContext();
-                    const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer);
+                    const arrayBuffer = await response.arrayBuffer(), audioContext = this._getAudioContext(), audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
                     this._audioMap.set(audio.source, audioBuffer);
                 });
+                if (promises instanceof Promise) {
+                    await promises;
+                }
+                else {
+                    await Promise.allSettled(promises);
+                }
+            }
+        }
+        async mute() {
+            if (!this._container.muted) {
+                await this.toggleMute();
             }
         }
         async start() {
@@ -304,17 +334,14 @@
             const canvas = container.canvas.element, pos = {
                 top: canvas.offsetTop,
                 right: canvas.offsetLeft + canvas.offsetWidth,
-            }, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10;
-            const toggleMute = async () => {
-                container.muted = !container.muted;
-                this._updateMuteIcons();
-                await this._updateMuteStatus();
-            };
+            }, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10, toggleMute = async () => {
+                await this.toggleMute();
+            }, enableIcons = soundsOptions.icons.enable, display = enableIcons ? "block" : "none";
             this._muteImg = initImage({
                 container,
                 options,
                 pos,
-                display: "block",
+                display,
                 iconOptions: mute,
                 margin,
                 rightOffsets: [volumeDown.width, volumeUp.width],
@@ -334,42 +361,76 @@
                 container,
                 options,
                 pos,
-                display: "block",
+                display,
                 iconOptions: volumeDown,
                 margin,
                 rightOffsets: [volumeUp.width],
                 clickCb: async () => {
-                    if (container.muted) {
-                        this._volume = 0;
-                    }
-                    this._volume -= soundsOptions.volume.step;
-                    await this._updateVolume();
+                    await this.volumeDown();
                 },
             });
             this._volumeUpImg = initImage({
                 container,
                 options,
                 pos,
-                display: "block",
+                display,
                 iconOptions: volumeUp,
                 margin,
                 rightOffsets: [],
                 clickCb: async () => {
-                    if (container.muted) {
-                        this._volume = 0;
-                    }
-                    this._volume += soundsOptions.volume.step;
-                    await this._updateVolume();
+                    await this.volumeUp();
                 },
             });
+            if (!(0, utils_js_1.isWindowMuted)() && soundsOptions.autoPlay) {
+                await this.unmute();
+            }
         }
         stop() {
             this._container.muted = true;
-            this._mute();
-            removeImage(this._muteImg);
-            removeImage(this._unmuteImg);
-            removeImage(this._volumeDownImg);
-            removeImage(this._volumeUpImg);
+            void (async () => {
+                await this._mute();
+                removeImage(this._muteImg);
+                removeImage(this._unmuteImg);
+                removeImage(this._volumeDownImg);
+                removeImage(this._volumeUpImg);
+            })();
+        }
+        async toggleMute() {
+            const container = this._container;
+            container.muted = !container.muted;
+            this._updateMuteIcons();
+            await this._updateMuteStatus();
+        }
+        async unmute() {
+            if (this._container.muted) {
+                await this.toggleMute();
+            }
+        }
+        async volumeDown() {
+            const container = this._container, soundsOptions = container.actualOptions.sounds;
+            if (!soundsOptions?.enable) {
+                return;
+            }
+            if (container.muted) {
+                this._volume = 0;
+            }
+            this._volume -= soundsOptions.volume.step;
+            await this._updateVolume();
+        }
+        async volumeUp() {
+            const container = this._container, soundsOptions = container.actualOptions.sounds;
+            if (!soundsOptions?.enable) {
+                return;
+            }
+            this._volume += soundsOptions.volume.step;
+            await this._updateVolume();
+        }
+        _getAudioContext() {
+            const container = this._container;
+            if (!container.audioContext) {
+                container.audioContext = new AudioContext();
+            }
+            return container.audioContext;
         }
     }
     exports.SoundsInstance = SoundsInstance;

package/umd/index.js

@@ -4,18 +4,31 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Options/Classes/Sounds.js", "./SoundsInstance.js"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Sounds.js", "./SoundsInstance.js", "./utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadSoundsPlugin = void 0;
+    const engine_1 = require("@tsparticles/engine");
     const Sounds_js_1 = require("./Options/Classes/Sounds.js");
     const SoundsInstance_js_1 = require("./SoundsInstance.js");
+    const utils_js_1 = require("./utils.js");
+    const generalFirstClickHandler = () => {
+        removeEventListener(engine_1.mouseDownEvent, generalFirstClickHandler);
+        removeEventListener(engine_1.touchStartEvent, generalFirstClickHandler);
+        (0, utils_js_1.unmuteWindow)();
+    };
     class SoundsPlugin {
         constructor(engine) {
             this.id = "sounds";
             this._engine = engine;
+            const listenerOptions = {
+                capture: true,
+                once: true,
+            };
+            addEventListener(engine_1.mouseDownEvent, generalFirstClickHandler, listenerOptions);
+            addEventListener(engine_1.touchStartEvent, generalFirstClickHandler, listenerOptions);
         }
         getPlugin(container) {
             return new SoundsInstance_js_1.SoundsInstance(container, this._engine);

package/umd/utils.js

@@ -9,7 +9,7 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getNoteFrequency = void 0;
+    exports.unmuteWindow = exports.isWindowMuted = exports.getNoteFrequency = void 0;
     const notes = new Map();
     notes.set("C", [16.35, 32.7, 65.41, 130.81, 261.63, 523.25, 1046.5, 2093.0, 4186.01]);
     notes.set("Db", [17.32, 34.65, 69.3, 138.59, 277.18, 554.37, 1108.73, 2217.46, 4434.92]);
@@ -25,15 +25,24 @@
     notes.set("B", [30.87, 61.74, 123.47, 246.94, 493.88, 987.77, 1975.53, 3951.07, 7902.13]);
     notes.set("pause", [0]);
     function getNoteFrequency(note) {
-        const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note);
-        if (!result || !result.length) {
+        const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note), groupKey = 2, defaultMatchKey = 0, innerGroupKey = 3;
+        if (!result?.length) {
             return;
         }
-        const noteKey = result[2] || result[0], noteItem = notes.get(noteKey);
+        const noteKey = result[groupKey] || result[defaultMatchKey], noteItem = notes.get(noteKey);
         if (!noteItem) {
             return;
         }
-        return noteItem[parseInt(result[3] || "0")];
+        return noteItem[parseInt(result[innerGroupKey] || "0")];
     }
     exports.getNoteFrequency = getNoteFrequency;
+    let muted = true;
+    const isWindowMuted = () => {
+        return muted;
+    };
+    exports.isWindowMuted = isWindowMuted;
+    const unmuteWindow = () => {
+        muted = false;
+    };
+    exports.unmuteWindow = unmuteWindow;
 });