@tsparticles/plugin-sounds 3.0.0-alpha.0 → 3.0.0-beta.0

package/esm/SoundsInstance.js

@@ -1,6 +1,20 @@
-import { clamp, itemFromArray, itemFromSingleOrMultiple } from "@tsparticles/engine";
-import { executeOnSingleOrMultiple } from "@tsparticles/engine";
+import { clamp, executeOnSingleOrMultiple, getLogger, isArray, isNumber, itemFromArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
 import { getNoteFrequency } from "./utils";
+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);
+    img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : "");
+    const parent = container.canvas.element?.parentNode || document.body;
+    parent.append(img);
+    img.addEventListener("click", clickCb);
+    return img;
+}
+function removeImage(image) {
+    if (!image) {
+        return;
+    }
+    image.remove();
+}
 function setIconStyle(icon, top, left, display, zIndex, width, margin) {
     icon.style.userSelect = "none";
     icon.style.webkitUserSelect = "none";
@@ -12,6 +26,228 @@ function setIconStyle(icon, top, left, display, zIndex, width, margin) {
 }
 export class SoundsInstance {
     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 = async (args) => {
+                    if (this._container !== args.container) {
+                        return;
+                    }
+                    if (!this._container || this._container.muted || this._container.destroyed) {
+                        executeOnSingleOrMultiple(event.event, (item) => {
+                            this._engine.removeEventListener(item, cb);
+                        });
+                        return;
+                    }
+                    if (event.filter && !event.filter(args)) {
+                        return;
+                    }
+                    if (event.audio) {
+                        this._playBuffer(itemFromSingleOrMultiple(event.audio));
+                    }
+                    else if (event.melodies) {
+                        const melody = itemFromArray(event.melodies);
+                        if (melody.melodies.length) {
+                            await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop)));
+                        }
+                        else {
+                            await this._playNote(melody.notes, 0, melody.loop);
+                        }
+                    }
+                    else if (event.notes) {
+                        const note = itemFromArray(event.notes);
+                        await this._playNote([note], 0, false);
+                    }
+                };
+                executeOnSingleOrMultiple(event.event, (item) => {
+                    this._engine.addEventListener(item, cb);
+                });
+            }
+        };
+        this._mute = () => {
+            const container = this._container;
+            if (!container.audioContext) {
+                return;
+            }
+            for (const source of this._audioSources) {
+                this._removeAudioSource(source);
+            }
+            if (this._gain) {
+                this._gain.disconnect();
+            }
+            container.audioContext.close();
+            container.audioContext = undefined;
+            this._engine.dispatchEvent("soundsMuted", { 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._container.audioContext || !this._gain) {
+                return;
+            }
+            const oscillator = this._addOscillator(this._container.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 = () => {
+            const container = this._container;
+            if (!container.audioContext) {
+                return;
+            }
+            const gain = container.audioContext.createGain();
+            gain.connect(container.audioContext.destination);
+            gain.gain.value = 0;
+            const oscillator = container.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;
+            const promises = executeOnSingleOrMultiple(value, async (_, idx) => {
+                return this._playNoteValue(notes, noteIdx, idx);
+            });
+            await (isArray(promises) ? Promise.allSettled(promises) : promises);
+            let nextNoteIdx = noteIdx + 1;
+            if (loop && nextNoteIdx >= notes.length) {
+                nextNoteIdx = nextNoteIdx % notes.length;
+            }
+            if (this._container.muted) {
+                return;
+            }
+            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);
+            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();
+            this._audioSources.splice(this._audioSources.indexOf(source), 1);
+        };
+        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;
+            if (!this._audioSources) {
+                this._audioSources = [];
+            }
+            const gain = audioContext.createGain();
+            gain.connect(audioContext.destination);
+            gain.gain.value = soundsOptions.volume.value / 100;
+            this._gain = gain;
+            this._initEvents();
+            this._engine.dispatchEvent("soundsUnmuted", { container: this._container });
+        };
+        this._updateMuteIcons = () => {
+            const container = this._container, 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 = () => {
+            const container = this._container;
+            if (container.muted) {
+                this._mute();
+            }
+            else {
+                this._unmute();
+                this._playMuteSound();
+            }
+        };
+        this._updateVolume = () => {
+            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 <= 0 && !container.muted) {
+                this._volume = 0;
+                container.muted = true;
+                stateChanged = true;
+            }
+            else if (this._volume > 0 && container.muted) {
+                container.muted = false;
+                stateChanged = true;
+            }
+            if (stateChanged) {
+                this._updateMuteIcons();
+                this._updateMuteStatus();
+            }
+            if (this._gain?.gain) {
+                this._gain.gain.value = this._volume / 100;
+            }
+        };
         this._container = container;
         this._engine = engine;
         this._volume = 0;
@@ -20,7 +256,7 @@ export class SoundsInstance {
     }
     async init() {
         const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
-        if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
+        if (!soundsOptions?.enable) {
             return;
         }
         this._volume = soundsOptions.volume.value;
@@ -43,294 +279,79 @@ export class SoundsInstance {
         }
     }
     async start() {
-        var _a, _b, _c, _d;
         const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
-        if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable) || !container.canvas.element) {
+        if (!soundsOptions?.enable || !container.canvas.element) {
             return;
         }
         container.muted = true;
-        this._muteImg = document.createElement("img");
-        this._unmuteImg = document.createElement("img");
-        this._volumeDownImg = document.createElement("img");
-        this._volumeUpImg = document.createElement("img");
-        const muteImg = this._muteImg, unmuteImg = this._unmuteImg, volumeDownImg = this._volumeDownImg, volumeUpImg = this._volumeUpImg, containerTop = container.canvas.element.offsetTop, containerRight = container.canvas.element.offsetLeft + container.canvas.element.offsetWidth, iconsOptions = soundsOptions.icons, muteOptions = iconsOptions.mute, unmuteOptions = iconsOptions.unmute, volumeDownOptions = iconsOptions.volumeDown, volumeUpOptions = iconsOptions.volumeUp, margin = 10;
-        setIconStyle(muteImg, containerTop + margin, containerRight - margin * 3 - muteOptions.width - volumeDownOptions.width - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, muteOptions.width, margin);
-        setIconStyle(unmuteImg, containerTop + margin, containerRight - margin * 3 - unmuteOptions.width - volumeDownOptions.width - volumeUpOptions.width, "none", options.fullScreen.zIndex + 1, unmuteOptions.width, margin);
-        setIconStyle(volumeDownImg, containerTop + margin, containerRight - margin * 2 - volumeDownOptions.width - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, volumeDownOptions.width, margin);
-        setIconStyle(volumeUpImg, containerTop + margin, containerRight - margin - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, volumeUpOptions.width, margin);
-        muteImg.src = (_a = muteOptions.path) !== null && _a !== void 0 ? _a : (muteOptions.svg ? `data:image/svg+xml;base64,${btoa(muteOptions.svg)}` : "");
-        unmuteImg.src =
-            (_b = unmuteOptions.path) !== null && _b !== void 0 ? _b : (unmuteOptions.svg ? `data:image/svg+xml;base64,${btoa(unmuteOptions.svg)}` : "");
-        volumeDownImg.src =
-            (_c = volumeDownOptions.path) !== null && _c !== void 0 ? _c : (volumeDownOptions.svg ? `data:image/svg+xml;base64,${btoa(volumeDownOptions.svg)}` : "");
-        volumeUpImg.src =
-            (_d = volumeUpOptions.path) !== null && _d !== void 0 ? _d : (volumeUpOptions.svg ? `data:image/svg+xml;base64,${btoa(volumeUpOptions.svg)}` : "");
-        const parent = container.canvas.element.parentNode || document.body;
-        parent.append(muteImg);
-        parent.append(unmuteImg);
-        parent.append(volumeDownImg);
-        parent.append(volumeUpImg);
+        const canvas = container.canvas.element, pos = {
+            top: canvas.offsetTop,
+            right: canvas.offsetLeft + canvas.offsetWidth,
+        }, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10;
         const toggleMute = () => {
             container.muted = !container.muted;
             this._updateMuteIcons();
             this._updateMuteStatus();
         };
-        const volumeDown = () => {
-            if (container.muted) {
-                this._volume = 0;
-            }
-            this._volume -= soundsOptions.volume.step;
-            this._updateVolume();
-        };
-        const volumeUp = () => {
-            if (container.muted) {
-                this._volume = 0;
-            }
-            this._volume += soundsOptions.volume.step;
-            this._updateVolume();
-        };
-        muteImg.addEventListener("click", toggleMute);
-        unmuteImg.addEventListener("click", toggleMute);
-        volumeDownImg.addEventListener("click", volumeDown);
-        volumeUpImg.addEventListener("click", volumeUp);
-    }
-    stop() {
-        this._container.muted = true;
-        this._mute();
-        if (this._muteImg) {
-            this._muteImg.remove();
-        }
-        if (this._unmuteImg) {
-            this._unmuteImg.remove();
-        }
-        if (this._volumeDownImg) {
-            this._volumeDownImg.remove();
-        }
-        if (this._volumeUpImg) {
-            this._volumeUpImg.remove();
-        }
-    }
-    _addBuffer(audioCtx) {
-        const buffer = audioCtx.createBufferSource();
-        this._audioSources.push(buffer);
-        return buffer;
-    }
-    _addOscillator(audioCtx) {
-        const oscillator = audioCtx.createOscillator();
-        this._audioSources.push(oscillator);
-        return oscillator;
-    }
-    _initEvents() {
-        const container = this._container, soundsOptions = container.actualOptions.sounds;
-        if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable) || !container.canvas.element) {
-            return;
-        }
-        for (const event of soundsOptions.events) {
-            const cb = async (args) => {
-                if (this._container !== args.container) {
-                    return;
-                }
-                if (!this._container || this._container.muted || this._container.destroyed) {
-                    executeOnSingleOrMultiple(event.event, (item) => {
-                        this._engine.removeEventListener(item, cb);
-                    });
-                    return;
-                }
-                if (event.filter && !event.filter(args)) {
-                    return;
-                }
-                if (event.audio) {
-                    this._playBuffer(itemFromSingleOrMultiple(event.audio));
-                }
-                else if (event.melodies) {
-                    const melody = itemFromArray(event.melodies);
-                    if (melody.melodies.length) {
-                        await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop)));
-                    }
-                    else {
-                        await this._playNote(melody.notes, 0, melody.loop);
-                    }
-                }
-                else if (event.notes) {
-                    const note = itemFromArray(event.notes);
-                    await this._playNote([note], 0, false);
-                }
-            };
-            executeOnSingleOrMultiple(event.event, (item) => {
-                this._engine.addEventListener(item, cb);
-            });
-        }
-    }
-    _mute() {
-        const container = this._container;
-        if (!container.audioContext) {
-            return;
-        }
-        for (const source of this._audioSources) {
-            this._removeAudioSource(source);
-        }
-        if (this._gain) {
-            this._gain.disconnect();
-        }
-        container.audioContext.close();
-        container.audioContext = undefined;
-        this._engine.dispatchEvent("soundsMuted", { container: this._container });
-    }
-    _playBuffer(audio) {
-        var _a;
-        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((_a = this._gain) !== null && _a !== void 0 ? _a : audioCtx.destination);
-        source.start();
-    }
-    async _playFrequency(frequency, duration) {
-        if (!this._container.audioContext || !this._gain) {
-            return;
-        }
-        const oscillator = this._addOscillator(this._container.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._muteImg = initImage({
+            container,
+            options,
+            pos,
+            display: "block",
+            iconOptions: mute,
+            margin,
+            rightOffsets: [volumeDown.width, volumeUp.width],
+            clickCb: toggleMute,
         });
-    }
-    _playMuteSound() {
-        const container = this._container;
-        if (!container.audioContext) {
-            return;
-        }
-        const gain = container.audioContext.createGain();
-        gain.connect(container.audioContext.destination);
-        gain.gain.value = 0;
-        const oscillator = container.audioContext.createOscillator();
-        oscillator.connect(gain);
-        oscillator.type = "sine";
-        oscillator.frequency.value = 1;
-        oscillator.start();
-        setTimeout(() => {
-            oscillator.stop();
-            oscillator.disconnect();
-            gain.disconnect();
+        this._unmuteImg = initImage({
+            container,
+            options,
+            pos,
+            display: "none",
+            iconOptions: unmute,
+            margin,
+            rightOffsets: [volumeDown.width, volumeUp.width],
+            clickCb: toggleMute,
         });
-    }
-    async _playNote(notes, noteIdx, loop) {
-        if (this._container.muted) {
-            return;
-        }
-        const note = notes[noteIdx];
-        if (!note) {
-            return;
-        }
-        const value = note.value;
-        const promises = executeOnSingleOrMultiple(value, async (_, idx) => {
-            return this._playNoteValue(notes, noteIdx, idx);
+        this._volumeDownImg = initImage({
+            container,
+            options,
+            pos,
+            display: "block",
+            iconOptions: volumeDown,
+            margin,
+            rightOffsets: [volumeUp.width],
+            clickCb: () => {
+                if (container.muted) {
+                    this._volume = 0;
+                }
+                this._volume -= soundsOptions.volume.step;
+                this._updateVolume();
+            },
+        });
+        this._volumeUpImg = initImage({
+            container,
+            options,
+            pos,
+            display: "block",
+            iconOptions: volumeUp,
+            margin,
+            rightOffsets: [],
+            clickCb: () => {
+                if (container.muted) {
+                    this._volume = 0;
+                }
+                this._volume += soundsOptions.volume.step;
+                this._updateVolume();
+            },
         });
-        await (promises instanceof Array ? Promise.allSettled(promises) : promises);
-        let nextNoteIdx = noteIdx + 1;
-        if (loop && nextNoteIdx >= notes.length) {
-            nextNoteIdx = nextNoteIdx % notes.length;
-        }
-        if (this._container.muted) {
-            return;
-        }
-        await this._playNote(notes, nextNoteIdx, loop);
-    }
-    async _playNoteValue(notes, noteIdx, valueIdx) {
-        const note = notes[noteIdx];
-        if (!note) {
-            return;
-        }
-        const value = itemFromSingleOrMultiple(note.value, valueIdx, true);
-        try {
-            const freq = getNoteFrequency(value);
-            if (typeof freq !== "number") {
-                return;
-            }
-            await this._playFrequency(freq, note.duration);
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }
-    _removeAudioSource(source) {
-        source.stop();
-        source.disconnect();
-        this._audioSources.splice(this._audioSources.indexOf(source), 1);
-    }
-    _unmute() {
-        const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
-        if (!soundsOptions) {
-            return;
-        }
-        if (!container.audioContext) {
-            container.audioContext = new AudioContext();
-        }
-        if (!this._audioSources) {
-            this._audioSources = [];
-        }
-        const gain = container.audioContext.createGain();
-        gain.connect(container.audioContext.destination);
-        gain.gain.value = soundsOptions.volume.value / 100;
-        this._gain = gain;
-        this._initEvents();
-        this._engine.dispatchEvent("soundsUnmuted", { container: this._container });
-    }
-    _updateMuteIcons() {
-        const container = this._container, 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() {
-        const container = this._container;
-        if (container.muted) {
-            this._mute();
-        }
-        else {
-            this._unmute();
-            this._playMuteSound();
-        }
     }
-    _updateVolume() {
-        var _a;
-        const container = this._container, soundsOptions = container.actualOptions.sounds;
-        if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
-            return;
-        }
-        clamp(this._volume, soundsOptions.volume.min, soundsOptions.volume.max);
-        let stateChanged = false;
-        if (this._volume <= 0 && !container.muted) {
-            this._volume = 0;
-            container.muted = true;
-            stateChanged = true;
-        }
-        else if (this._volume > 0 && container.muted) {
-            container.muted = false;
-            stateChanged = true;
-        }
-        if (stateChanged) {
-            this._updateMuteIcons();
-            this._updateMuteStatus();
-        }
-        if ((_a = this._gain) === null || _a === void 0 ? void 0 : _a.gain) {
-            this._gain.gain.value = this._volume / 100;
-        }
+    stop() {
+        this._container.muted = true;
+        this._mute();
+        removeImage(this._muteImg);
+        removeImage(this._unmuteImg);
+        removeImage(this._volumeDownImg);
+        removeImage(this._volumeUpImg);
     }
 }

package/esm/index.js

@@ -9,21 +9,19 @@ class SoundsPlugin {
         return new SoundsInstance(container, this._engine);
     }
     loadOptions(options, source) {
-        if (!this.needsPlugin(source)) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
         let soundsOptions = options.sounds;
-        if ((soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.load) === undefined) {
+        if (soundsOptions?.load === undefined) {
             options.sounds = soundsOptions = new Sounds();
         }
-        soundsOptions.load(source === null || source === void 0 ? void 0 : source.sounds);
+        soundsOptions.load(source?.sounds);
     }
     needsPlugin(options) {
-        var _a, _b;
-        return (_b = (_a = options === null || options === void 0 ? void 0 : options.sounds) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+        return options?.sounds?.enable ?? false;
     }
 }
-export async function loadSoundsPlugin(engine) {
-    const plugin = new SoundsPlugin(engine);
-    await engine.addPlugin(plugin);
+export async function loadSoundsPlugin(engine, refresh = true) {
+    await engine.addPlugin(new SoundsPlugin(engine), refresh);
 }

package/esm/utils.js

@@ -17,7 +17,6 @@ export function getNoteFrequency(note) {
     if (!result || !result.length) {
         return;
     }
-    console.log(result);
     const noteKey = result[2] || result[0], noteItem = notes.get(noteKey);
     if (!noteItem) {
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-sounds",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-beta.0",
   "description": "tsParticles sounds plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -72,10 +72,11 @@
   "unpkg": "tsparticles.plugin.sounds.min.js",
   "module": "esm/index.js",
   "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.0"
   }
-}
+}