@tsparticles/plugin-sounds 4.0.0-alpha.5 → 4.0.0-beta.0

package/browser/SoundsPluginInstance.js

@@ -6,9 +6,7 @@ const zIndexOffset = 1, rightOffset = 1, minVolume = 0;
 function initImage(data) {
     const img = safeDocument().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);
+        (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 ?? safeDocument().body;
     parent.append(img);
@@ -33,242 +31,17 @@ function setIconStyle(icon, top, left, display, zIndex, width, margin, style) {
     icon.style.cssText += style;
 }
 export class SoundsPluginInstance {
+    _audioMap;
+    _audioSources;
+    _container;
+    _engine;
+    _gain;
+    _muteImg;
+    _unmuteImg;
+    _volume;
+    _volumeDownImg;
+    _volumeUpImg;
     constructor(container, engine) {
-        this._addBuffer = audioCtx => {
-            const buffer = audioCtx.createBufferSource();
-            this._audioSources.push(buffer);
-            return buffer;
-        };
-        this._addOscillator = audioCtx => {
-            const oscillator = audioCtx.createOscillator();
-            this._audioSources.push(oscillator);
-            return oscillator;
-        };
-        this._initEvents = () => {
-            const container = this._container, soundsOptions = container.actualOptions.sounds;
-            if (!soundsOptions?.enable || !container.canvas.element) {
-                return;
-            }
-            for (const event of soundsOptions.events) {
-                const cb = (args) => {
-                    if (!args) {
-                        return;
-                    }
-                    void (async () => {
-                        const filterNotValid = event.filter && !event.filter(args);
-                        if (this._container !== args.container) {
-                            return;
-                        }
-                        if (!!this._container.muted || this._container.destroyed) {
-                            executeOnSingleOrMultiple(event.event, item => {
-                                this._engine.removeEventListener(item, cb);
-                            });
-                            return;
-                        }
-                        if (filterNotValid) {
-                            return;
-                        }
-                        const defaultNoteIndex = 0;
-                        if (event.audio) {
-                            const audio = itemFromSingleOrMultiple(event.audio);
-                            if (!audio) {
-                                return;
-                            }
-                            this._playBuffer(audio);
-                        }
-                        else if (event.melodies) {
-                            const melody = itemFromArray(event.melodies);
-                            if (!melody) {
-                                return;
-                            }
-                            if (melody.melodies.length) {
-                                await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, defaultNoteIndex, melody.loop)));
-                            }
-                            else {
-                                await this._playNote(melody.notes, defaultNoteIndex, melody.loop);
-                            }
-                        }
-                        else if (event.notes) {
-                            const note = itemFromArray(event.notes);
-                            if (!note) {
-                                return;
-                            }
-                            await this._playNote([note], defaultNoteIndex, false);
-                        }
-                    })();
-                };
-                executeOnSingleOrMultiple(event.event, item => {
-                    this._engine.addEventListener(item, cb);
-                });
-            }
-        };
-        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();
-            }
-            await audioContext.close();
-            container.audioContext = undefined;
-            this._engine.dispatchEvent(SoundsEventType.mute, { container: this._container });
-        };
-        this._playBuffer = audio => {
-            const audioBuffer = this._audioMap.get(audio.source);
-            if (!audioBuffer) {
-                return;
-            }
-            const audioCtx = this._container.audioContext;
-            if (!audioCtx) {
-                return;
-            }
-            const source = this._addBuffer(audioCtx);
-            source.loop = audio.loop;
-            source.buffer = audioBuffer;
-            source.connect(this._gain ?? audioCtx.destination);
-            source.start();
-        };
-        this._playFrequency = async (frequency, duration) => {
-            if (!this._gain || this._container.muted) {
-                return;
-            }
-            const audioContext = this._getAudioContext(), oscillator = this._addOscillator(audioContext);
-            oscillator.connect(this._gain);
-            oscillator.type = "sine";
-            oscillator.frequency.value = frequency;
-            oscillator.start();
-            return new Promise(resolve => {
-                setTimeout(() => {
-                    this._removeAudioSource(oscillator);
-                    resolve();
-                }, duration);
-            });
-        };
-        this._playMuteSound = () => {
-            if (this._container.muted) {
-                return;
-            }
-            const audioContext = this._getAudioContext(), gain = audioContext.createGain();
-            gain.connect(audioContext.destination);
-            gain.gain.value = 0;
-            const oscillator = audioContext.createOscillator();
-            oscillator.connect(gain);
-            oscillator.type = "sine";
-            oscillator.frequency.value = 1;
-            oscillator.start();
-            setTimeout(() => {
-                oscillator.stop();
-                oscillator.disconnect();
-                gain.disconnect();
-            });
-        };
-        this._playNote = async (notes, noteIdx, loop) => {
-            if (this._container.muted) {
-                return;
-            }
-            const note = notes[noteIdx];
-            if (!note) {
-                return;
-            }
-            const value = note.value, promises = executeOnSingleOrMultiple(value, async (_, idx) => {
-                return this._playNoteValue(notes, noteIdx, idx);
-            });
-            await (isArray(promises) ? Promise.allSettled(promises) : promises);
-            const indexOffset = 1;
-            let nextNoteIdx = noteIdx + indexOffset;
-            if (loop && nextNoteIdx >= notes.length) {
-                nextNoteIdx = nextNoteIdx % notes.length;
-            }
-            await this._playNote(notes, nextNoteIdx, loop);
-        };
-        this._playNoteValue = async (notes, noteIdx, valueIdx) => {
-            const note = notes[noteIdx];
-            if (!note) {
-                return;
-            }
-            const value = itemFromSingleOrMultiple(note.value, valueIdx, true);
-            if (!value) {
-                return;
-            }
-            try {
-                const freq = getNoteFrequency(value);
-                if (!isNumber(freq)) {
-                    return;
-                }
-                await this._playFrequency(freq, note.duration);
-            }
-            catch (e) {
-                getLogger().error(e);
-            }
-        };
-        this._removeAudioSource = source => {
-            source.stop();
-            source.disconnect();
-            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;
-            }
-            const audioContext = this._getAudioContext(), gain = audioContext.createGain();
-            gain.connect(audioContext.destination);
-            gain.gain.value = soundsOptions.volume.value / percentDenominator;
-            this._gain = gain;
-            this._initEvents();
-            this._engine.dispatchEvent(SoundsEventType.unmute, { container: this._container });
-        };
-        this._updateMuteIcons = () => {
-            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";
-            }
-            if (unmuteImg) {
-                unmuteImg.style.display = container.muted ? "none" : "block";
-            }
-        };
-        this._updateMuteStatus = async () => {
-            const container = this._container, audioContext = this._getAudioContext();
-            if (container.muted) {
-                await audioContext.suspend();
-                await this._mute();
-            }
-            else {
-                await audioContext.resume();
-                this._unmute();
-                this._playMuteSound();
-            }
-        };
-        this._updateVolume = async () => {
-            const container = this._container, soundsOptions = container.actualOptions.sounds;
-            if (!soundsOptions?.enable) {
-                return;
-            }
-            clamp(this._volume, soundsOptions.volume.min, soundsOptions.volume.max);
-            let stateChanged = false;
-            if (this._volume <= minVolume && !container.muted) {
-                this._volume = 0;
-                container.muted = true;
-                stateChanged = true;
-            }
-            else if (this._volume > minVolume && container.muted) {
-                container.muted = false;
-                stateChanged = true;
-            }
-            if (stateChanged) {
-                this._updateMuteIcons();
-                await this._updateMuteStatus();
-            }
-            if (this._gain?.gain) {
-                this._gain.gain.value = this._volume / percentDenominator;
-            }
-        };
         this._container = container;
         this._engine = engine;
         this._volume = 0;
@@ -286,8 +59,7 @@ export class SoundsPluginInstance {
                 removeEventListener(touchStartEvent, firstClickHandler);
                 unmuteWindow();
                 void this.unmute();
-            };
-            const listenerOptions = {
+            }, listenerOptions = {
                 capture: true,
                 once: true,
             };
@@ -422,9 +194,244 @@ export class SoundsPluginInstance {
         this._volume += soundsOptions.volume.step;
         await this._updateVolume();
     }
+    _addBuffer = audioCtx => {
+        const buffer = audioCtx.createBufferSource();
+        this._audioSources.push(buffer);
+        return buffer;
+    };
+    _addOscillator = audioCtx => {
+        const oscillator = audioCtx.createOscillator();
+        this._audioSources.push(oscillator);
+        return oscillator;
+    };
     _getAudioContext() {
         const container = this._container;
         container.audioContext ??= new AudioContext();
         return container.audioContext;
     }
+    _initEvents = () => {
+        const container = this._container, soundsOptions = container.actualOptions.sounds;
+        if (!soundsOptions?.enable || !container.canvas.element) {
+            return;
+        }
+        for (const event of soundsOptions.events) {
+            const cb = (args) => {
+                if (!args) {
+                    return;
+                }
+                void (async () => {
+                    const filterNotValid = event.filter && !event.filter(args);
+                    if (this._container !== args.container) {
+                        return;
+                    }
+                    if (!!this._container.muted || this._container.destroyed) {
+                        executeOnSingleOrMultiple(event.event, item => {
+                            this._engine.removeEventListener(item, cb);
+                        });
+                        return;
+                    }
+                    if (filterNotValid) {
+                        return;
+                    }
+                    const defaultNoteIndex = 0;
+                    if (event.audio) {
+                        const audio = itemFromSingleOrMultiple(event.audio);
+                        if (!audio) {
+                            return;
+                        }
+                        this._playBuffer(audio);
+                    }
+                    else if (event.melodies) {
+                        const melody = itemFromArray(event.melodies);
+                        if (!melody) {
+                            return;
+                        }
+                        if (melody.melodies.length) {
+                            await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, defaultNoteIndex, melody.loop)));
+                        }
+                        else {
+                            await this._playNote(melody.notes, defaultNoteIndex, melody.loop);
+                        }
+                    }
+                    else if (event.notes) {
+                        const note = itemFromArray(event.notes);
+                        if (!note) {
+                            return;
+                        }
+                        await this._playNote([note], defaultNoteIndex, false);
+                    }
+                })();
+            };
+            executeOnSingleOrMultiple(event.event, item => {
+                this._engine.addEventListener(item, cb);
+            });
+        }
+    };
+    _mute = async () => {
+        const container = this._container, audioContext = this._getAudioContext();
+        for (const source of this._audioSources) {
+            this._removeAudioSource(source);
+        }
+        if (this._gain) {
+            this._gain.disconnect();
+        }
+        await audioContext.close();
+        container.audioContext = undefined;
+        this._engine.dispatchEvent(SoundsEventType.mute, { container: this._container });
+    };
+    _playBuffer = audio => {
+        const audioBuffer = this._audioMap.get(audio.source);
+        if (!audioBuffer) {
+            return;
+        }
+        const audioCtx = this._container.audioContext;
+        if (!audioCtx) {
+            return;
+        }
+        const source = this._addBuffer(audioCtx);
+        source.loop = audio.loop;
+        source.buffer = audioBuffer;
+        source.connect(this._gain ?? audioCtx.destination);
+        source.start();
+    };
+    _playFrequency = async (frequency, duration) => {
+        if (!this._gain || this._container.muted) {
+            return;
+        }
+        const audioContext = this._getAudioContext(), oscillator = this._addOscillator(audioContext);
+        oscillator.connect(this._gain);
+        oscillator.type = "sine";
+        oscillator.frequency.value = frequency;
+        oscillator.start();
+        return new Promise(resolve => {
+            setTimeout(() => {
+                this._removeAudioSource(oscillator);
+                resolve();
+            }, duration);
+        });
+    };
+    _playMuteSound = () => {
+        if (this._container.muted) {
+            return;
+        }
+        const audioContext = this._getAudioContext(), gain = audioContext.createGain();
+        gain.connect(audioContext.destination);
+        gain.gain.value = 0;
+        const oscillator = audioContext.createOscillator();
+        oscillator.connect(gain);
+        oscillator.type = "sine";
+        oscillator.frequency.value = 1;
+        oscillator.start();
+        setTimeout(() => {
+            oscillator.stop();
+            oscillator.disconnect();
+            gain.disconnect();
+        });
+    };
+    _playNote = async (notes, noteIdx, loop) => {
+        if (this._container.muted) {
+            return;
+        }
+        const note = notes[noteIdx];
+        if (!note) {
+            return;
+        }
+        const value = note.value, promises = executeOnSingleOrMultiple(value, async (_, idx) => {
+            return this._playNoteValue(notes, noteIdx, idx);
+        });
+        await (isArray(promises) ? Promise.allSettled(promises) : promises);
+        const indexOffset = 1;
+        let nextNoteIdx = noteIdx + indexOffset;
+        if (loop && nextNoteIdx >= notes.length) {
+            nextNoteIdx = nextNoteIdx % notes.length;
+        }
+        await this._playNote(notes, nextNoteIdx, loop);
+    };
+    _playNoteValue = async (notes, noteIdx, valueIdx) => {
+        const note = notes[noteIdx];
+        if (!note) {
+            return;
+        }
+        const value = itemFromSingleOrMultiple(note.value, valueIdx, true);
+        if (!value) {
+            return;
+        }
+        try {
+            const freq = getNoteFrequency(value);
+            if (!isNumber(freq)) {
+                return;
+            }
+            await this._playFrequency(freq, note.duration);
+        }
+        catch (e) {
+            getLogger().error(e);
+        }
+    };
+    _removeAudioSource = source => {
+        source.stop();
+        source.disconnect();
+        const deleteCount = 1;
+        this._audioSources.splice(this._audioSources.indexOf(source), deleteCount);
+    };
+    _unmute = () => {
+        const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
+        if (!soundsOptions) {
+            return;
+        }
+        const audioContext = this._getAudioContext(), gain = audioContext.createGain();
+        gain.connect(audioContext.destination);
+        gain.gain.value = soundsOptions.volume.value / percentDenominator;
+        this._gain = gain;
+        this._initEvents();
+        this._engine.dispatchEvent(SoundsEventType.unmute, { container: this._container });
+    };
+    _updateMuteIcons = () => {
+        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";
+        }
+        if (unmuteImg) {
+            unmuteImg.style.display = container.muted ? "none" : "block";
+        }
+    };
+    _updateMuteStatus = async () => {
+        const container = this._container, audioContext = this._getAudioContext();
+        if (container.muted) {
+            await audioContext.suspend();
+            await this._mute();
+        }
+        else {
+            await audioContext.resume();
+            this._unmute();
+            this._playMuteSound();
+        }
+    };
+    _updateVolume = async () => {
+        const container = this._container, soundsOptions = container.actualOptions.sounds;
+        if (!soundsOptions?.enable) {
+            return;
+        }
+        clamp(this._volume, soundsOptions.volume.min, soundsOptions.volume.max);
+        let stateChanged = false;
+        if (this._volume <= minVolume && !container.muted) {
+            this._volume = 0;
+            container.muted = true;
+            stateChanged = true;
+        }
+        else if (this._volume > minVolume && container.muted) {
+            container.muted = false;
+            stateChanged = true;
+        }
+        if (stateChanged) {
+            this._updateMuteIcons();
+            await this._updateMuteStatus();
+        }
+        if (this._gain?.gain) {
+            this._gain.gain.value = this._volume / percentDenominator;
+        }
+    };
 }

package/browser/index.js

@@ -1,5 +1,5 @@
 export async function loadSoundsPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
         const { SoundsPlugin } = await import("./SoundsPlugin.js");
         e.addPlugin(new SoundsPlugin(engine));

package/cjs/Options/Classes/Sounds.js

@@ -3,6 +3,11 @@ import { SoundsEvent } from "./SoundsEvent.js";
 import { SoundsIcons } from "./SoundsIcons.js";
 import { SoundsVolume } from "./SoundsVolume.js";
 export class Sounds {
+    autoPlay;
+    enable;
+    events;
+    icons;
+    volume;
     constructor() {
         this.autoPlay = true;
         this.enable = false;

package/cjs/Options/Classes/SoundsAudio.js

@@ -1,5 +1,7 @@
 import { isNull, isObject } from "@tsparticles/engine";
 export class SoundsAudio {
+    loop;
+    source;
     constructor() {
         this.loop = false;
         this.source = "";

package/cjs/Options/Classes/SoundsEvent.js

@@ -3,6 +3,11 @@ import { SoundsAudio } from "./SoundsAudio.js";
 import { SoundsMelody } from "./SoundsMelody.js";
 import { SoundsNote } from "./SoundsNote.js";
 export class SoundsEvent {
+    audio;
+    event;
+    filter;
+    melodies;
+    notes;
     constructor() {
         this.event = [];
         this.notes = [];

package/cjs/Options/Classes/SoundsIcon.js

@@ -1,5 +1,10 @@
 import { isNull } from "@tsparticles/engine";
 export class SoundsIcon {
+    height;
+    path;
+    style;
+    svg;
+    width;
     constructor() {
         this.width = 24;
         this.height = 24;

package/cjs/Options/Classes/SoundsIcons.js

@@ -1,6 +1,11 @@
 import { isNull } from "@tsparticles/engine";
 import { SoundsIcon } from "./SoundsIcon.js";
 export class SoundsIcons {
+    enable;
+    mute;
+    unmute;
+    volumeDown;
+    volumeUp;
     constructor() {
         this.mute = new SoundsIcon();
         this.unmute = new SoundsIcon();

package/cjs/Options/Classes/SoundsMelody.js

@@ -1,6 +1,9 @@
 import { isNull } from "@tsparticles/engine";
 import { SoundsNote } from "./SoundsNote.js";
 export class SoundsMelody {
+    loop;
+    melodies;
+    notes;
     constructor() {
         this.loop = false;
         this.melodies = [];

package/cjs/Options/Classes/SoundsNote.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class SoundsNote {
+    duration;
+    value;
     constructor() {
         this.duration = 500;
         this.value = [];

package/cjs/Options/Classes/SoundsVolume.js

@@ -1,5 +1,9 @@
 import { isNull, isObject } from "@tsparticles/engine";
 export class SoundsVolume {
+    max;
+    min;
+    step;
+    value;
     constructor() {
         this.value = 100;
         this.max = 100;

package/cjs/SoundsPlugin.js

@@ -7,8 +7,9 @@ const generalFirstClickHandler = () => {
     unmuteWindow();
 };
 export class SoundsPlugin {
+    id = "sounds";
+    _engine;
     constructor(engine) {
-        this.id = "sounds";
         this._engine = engine;
         const listenerOptions = {
             capture: true,