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

package/cjs/SoundsInstance.js

@@ -1,18 +1,23 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SoundsInstance = void 0;
 const engine_1 = require("@tsparticles/engine");
-const engine_2 = require("@tsparticles/engine");
 const utils_1 = require("./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";
@@ -24,192 +29,88 @@ function setIconStyle(icon, top, left, display, zIndex, width, margin) {
 }
 class SoundsInstance {
     constructor(container, engine) {
-        this._container = container;
-        this._engine = engine;
-        this._volume = 0;
-        this._audioSources = [];
-        this._audioMap = new Map();
-    }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
-            if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
+        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;
             }
-            this._volume = soundsOptions.volume.value;
-            const events = soundsOptions.events;
-            this._audioMap = new Map();
-            for (const event of events) {
-                if (!event.audio) {
-                    continue;
-                }
-                (0, engine_2.executeOnSingleOrMultiple)(event.audio, (audio) => __awaiter(this, void 0, void 0, function* () {
-                    const response = yield fetch(audio.source);
-                    if (!response.ok) {
+            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) {
+                        (0, engine_1.executeOnSingleOrMultiple)(event.event, (item) => {
+                            this._engine.removeEventListener(item, cb);
+                        });
+                        return;
+                    }
+                    if (event.filter && !event.filter(args)) {
                         return;
                     }
-                    const arrayBuffer = yield response.arrayBuffer();
-                    container.audioContext = new AudioContext();
-                    const audioBuffer = yield container.audioContext.decodeAudioData(arrayBuffer);
-                    this._audioMap.set(audio.source, audioBuffer);
-                }));
+                    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)));
+                        }
+                        else {
+                            await this._playNote(melody.notes, 0, melody.loop);
+                        }
+                    }
+                    else if (event.notes) {
+                        const note = (0, engine_1.itemFromArray)(event.notes);
+                        await this._playNote([note], 0, false);
+                    }
+                };
+                (0, engine_1.executeOnSingleOrMultiple)(event.event, (item) => {
+                    this._engine.addEventListener(item, cb);
+                });
             }
-        });
-    }
-    start() {
-        var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function* () {
-            const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
-            if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable) || !container.canvas.element) {
+        };
+        this._mute = () => {
+            const container = this._container;
+            if (!container.audioContext) {
                 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 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 = (args) => __awaiter(this, void 0, void 0, function* () {
-                if (this._container !== args.container) {
-                    return;
-                }
-                if (!this._container || this._container.muted || this._container.destroyed) {
-                    (0, engine_2.executeOnSingleOrMultiple)(event.event, (item) => {
-                        this._engine.removeEventListener(item, cb);
-                    });
-                    return;
-                }
-                if (event.filter && !event.filter(args)) {
-                    return;
-                }
-                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) {
-                        yield Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop)));
-                    }
-                    else {
-                        yield this._playNote(melody.notes, 0, melody.loop);
-                    }
-                }
-                else if (event.notes) {
-                    const note = (0, engine_1.itemFromArray)(event.notes);
-                    yield this._playNote([note], 0, false);
-                }
-            });
-            (0, engine_2.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();
-    }
-    _playFrequency(frequency, duration) {
-        return __awaiter(this, void 0, void 0, function* () {
+            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;
             }
@@ -224,29 +125,27 @@ class SoundsInstance {
                     resolve();
                 }, duration);
             });
-        });
-    }
-    _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();
-        });
-    }
-    _playNote(notes, noteIdx, loop) {
-        return __awaiter(this, void 0, void 0, function* () {
+        };
+        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;
             }
@@ -255,10 +154,10 @@ class SoundsInstance {
                 return;
             }
             const value = note.value;
-            const promises = (0, engine_2.executeOnSingleOrMultiple)(value, (_, idx) => __awaiter(this, void 0, void 0, function* () {
+            const promises = (0, engine_1.executeOnSingleOrMultiple)(value, async (_, idx) => {
                 return this._playNoteValue(notes, noteIdx, idx);
-            }));
-            yield (promises instanceof Array ? Promise.allSettled(promises) : promises);
+            });
+            await ((0, engine_1.isArray)(promises) ? Promise.allSettled(promises) : promises);
             let nextNoteIdx = noteIdx + 1;
             if (loop && nextNoteIdx >= notes.length) {
                 nextNoteIdx = nextNoteIdx % notes.length;
@@ -266,11 +165,9 @@ class SoundsInstance {
             if (this._container.muted) {
                 return;
             }
-            yield this._playNote(notes, nextNoteIdx, loop);
-        });
-    }
-    _playNoteValue(notes, noteIdx, valueIdx) {
-        return __awaiter(this, void 0, void 0, function* () {
+            await this._playNote(notes, nextNoteIdx, loop);
+        };
+        this._playNoteValue = async (notes, noteIdx, valueIdx) => {
             const note = notes[noteIdx];
             if (!note) {
                 return;
@@ -278,82 +175,187 @@ class SoundsInstance {
             const value = (0, engine_1.itemFromSingleOrMultiple)(note.value, valueIdx, true);
             try {
                 const freq = (0, utils_1.getNoteFrequency)(value);
-                if (typeof freq !== "number") {
+                if (!(0, engine_1.isNumber)(freq)) {
                     return;
                 }
-                yield this._playFrequency(freq, note.duration);
+                await this._playFrequency(freq, note.duration);
             }
             catch (e) {
-                console.error(e);
+                (0, engine_1.getLogger)().error(e);
             }
-        });
-    }
-    _removeAudioSource(source) {
-        source.stop();
-        source.disconnect();
-        this._audioSources.splice(this._audioSources.indexOf(source), 1);
+        };
+        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;
+            }
+            (0, engine_1.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;
+        this._audioSources = [];
+        this._audioMap = new Map();
     }
-    _unmute() {
+    async init() {
         const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
-        if (!soundsOptions) {
+        if (!soundsOptions?.enable) {
             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();
+        this._volume = soundsOptions.volume.value;
+        const events = soundsOptions.events;
+        this._audioMap = new Map();
+        for (const event of events) {
+            if (!event.audio) {
+                continue;
+            }
+            (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);
+                this._audioMap.set(audio.source, audioBuffer);
+            });
         }
     }
-    _updateVolume() {
-        var _a;
-        const container = this._container, soundsOptions = container.actualOptions.sounds;
-        if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
+    async start() {
+        const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
+        if (!soundsOptions?.enable || !container.canvas.element) {
             return;
         }
-        (0, engine_1.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) {
+        container.muted = true;
+        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();
-        }
-        if ((_a = this._gain) === null || _a === void 0 ? void 0 : _a.gain) {
-            this._gain.gain.value = this._volume / 100;
-        }
+        };
+        this._muteImg = initImage({
+            container,
+            options,
+            pos,
+            display: "block",
+            iconOptions: mute,
+            margin,
+            rightOffsets: [volumeDown.width, volumeUp.width],
+            clickCb: toggleMute,
+        });
+        this._unmuteImg = initImage({
+            container,
+            options,
+            pos,
+            display: "none",
+            iconOptions: unmute,
+            margin,
+            rightOffsets: [volumeDown.width, volumeUp.width],
+            clickCb: toggleMute,
+        });
+        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();
+            },
+        });
+    }
+    stop() {
+        this._container.muted = true;
+        this._mute();
+        removeImage(this._muteImg);
+        removeImage(this._unmuteImg);
+        removeImage(this._volumeDownImg);
+        removeImage(this._volumeUpImg);
     }
 }
 exports.SoundsInstance = SoundsInstance;