@tsparticles/plugin-sounds 3.0.0-alpha.0

package/umd/Options/Classes/SoundsVolume.js

@@ -0,0 +1,44 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SoundsVolume = void 0;
+    class SoundsVolume {
+        constructor() {
+            this.value = 100;
+            this.max = 100;
+            this.min = 0;
+            this.step = 10;
+        }
+        load(data) {
+            if (data === undefined) {
+                return;
+            }
+            if (typeof data === "object") {
+                if (data.max !== undefined) {
+                    this.max = data.max;
+                }
+                if (data.min !== undefined) {
+                    this.min = data.min;
+                }
+                if (data.step !== undefined) {
+                    this.step = data.step;
+                }
+                if (data.value !== undefined) {
+                    this.value = data.value;
+                }
+            }
+            else {
+                this.value = data;
+            }
+        }
+    }
+    exports.SoundsVolume = SoundsVolume;
+});

package/umd/Options/Interfaces/ISounds.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ISoundsAudio.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ISoundsEvent.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ISoundsIcon.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ISoundsIcons.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ISoundsMelody.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ISoundsNote.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ISoundsVolume.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/SoundsInstance.js

@@ -0,0 +1,350 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine", "@tsparticles/engine", "./utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    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 setIconStyle(icon, top, left, display, zIndex, width, margin) {
+        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}`;
+    }
+    class SoundsInstance {
+        constructor(container, engine) {
+            this._container = container;
+            this._engine = engine;
+            this._volume = 0;
+            this._audioSources = [];
+            this._audioMap = new Map();
+        }
+        async init() {
+            const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
+            if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
+                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, 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);
+                });
+            }
+        }
+        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) {
+                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 = async (args) => {
+                    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) {
+                            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_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();
+        }
+        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);
+            });
+        }
+        _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();
+            });
+        }
+        async _playNote(notes, noteIdx, loop) {
+            if (this._container.muted) {
+                return;
+            }
+            const note = notes[noteIdx];
+            if (!note) {
+                return;
+            }
+            const value = note.value;
+            const promises = (0, engine_2.executeOnSingleOrMultiple)(value, async (_, idx) => {
+                return this._playNoteValue(notes, noteIdx, idx);
+            });
+            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 = (0, engine_1.itemFromSingleOrMultiple)(note.value, valueIdx, true);
+            try {
+                const freq = (0, utils_1.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;
+            }
+            (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 ((_a = this._gain) === null || _a === void 0 ? void 0 : _a.gain) {
+                this._gain.gain.value = this._volume / 100;
+            }
+        }
+    }
+    exports.SoundsInstance = SoundsInstance;
+});

package/umd/enums.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/index.js

@@ -0,0 +1,43 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./Options/Classes/Sounds", "./SoundsInstance"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadSoundsPlugin = void 0;
+    const Sounds_1 = require("./Options/Classes/Sounds");
+    const SoundsInstance_1 = require("./SoundsInstance");
+    class SoundsPlugin {
+        constructor(engine) {
+            this.id = "sounds";
+            this._engine = engine;
+        }
+        getPlugin(container) {
+            return new SoundsInstance_1.SoundsInstance(container, this._engine);
+        }
+        loadOptions(options, source) {
+            if (!this.needsPlugin(source)) {
+                return;
+            }
+            let soundsOptions = options.sounds;
+            if ((soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.load) === undefined) {
+                options.sounds = soundsOptions = new Sounds_1.Sounds();
+            }
+            soundsOptions.load(source === null || source === void 0 ? void 0 : 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;
+        }
+    }
+    async function loadSoundsPlugin(engine) {
+        const plugin = new SoundsPlugin(engine);
+        await engine.addPlugin(plugin);
+    }
+    exports.loadSoundsPlugin = loadSoundsPlugin;
+});

package/umd/types.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/utils.js

@@ -0,0 +1,40 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    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]);
+    notes.set("D", [18.35, 36.71, 73.42, 146.83, 293.66, 587.33, 1174.66, 2349.32, 4698.63]);
+    notes.set("Eb", [19.45, 38.89, 77.78, 155.56, 311.13, 622.25, 1244.51, 2489.02, 4978.03]);
+    notes.set("E", [20.6, 41.2, 82.41, 164.81, 329.63, 659.25, 1318.51, 2637.02, 5274.04]);
+    notes.set("F", [21.83, 43.65, 87.31, 174.61, 349.23, 698.46, 1396.91, 2793.83, 5587.65]);
+    notes.set("Gb", [23.12, 46.25, 92.5, 185.0, 369.99, 739.99, 1479.98, 2959.96, 5919.91]);
+    notes.set("G", [24.5, 49.0, 98.0, 196.0, 392.0, 783.99, 1567.98, 3135.96, 6271.93]);
+    notes.set("Ab", [25.96, 51.91, 103.83, 207.65, 415.3, 830.61, 1661.22, 3322.44, 6644.88]);
+    notes.set("A", [27.5, 55.0, 110.0, 220.0, 440.0, 880.0, 1760.0, 3520.0, 7040.0]);
+    notes.set("Bb", [29.14, 58.27, 116.54, 233.08, 466.16, 932.33, 1864.66, 3729.31, 7458.62]);
+    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) {
+            return;
+        }
+        console.log(result);
+        const noteKey = result[2] || result[0], noteItem = notes.get(noteKey);
+        if (!noteItem) {
+            return;
+        }
+        return noteItem[parseInt(result[3] || "0")];
+    }
+    exports.getNoteFrequency = getNoteFrequency;
+});