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

package/tsparticles.plugin.sounds.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -91,10 +91,13 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "loadSoundsPlugin": () => (/* binding */ loadSoundsPlugin)
+  loadSoundsPlugin: () => (/* binding */ loadSoundsPlugin)
 });
 
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
+var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/SoundsAudio.js
+
 class SoundsAudio {
   constructor() {
     this.loop = false;
@@ -104,7 +107,7 @@ class SoundsAudio {
     if (data === undefined) {
       return;
     }
-    if (typeof data === "object") {
+    if ((0,engine_root_window_.isObject)(data)) {
       if (data.loop !== undefined) {
         this.loop = data.loop;
       }
@@ -169,6 +172,7 @@ class SoundsMelody {
 
 
 
+
 class SoundsEvent {
   constructor() {
     this.event = [];
@@ -182,7 +186,7 @@ class SoundsEvent {
       this.event = data.event;
     }
     if (data.audio !== undefined) {
-      if (data.audio instanceof Array) {
+      if ((0,engine_root_window_.isArray)(data.audio)) {
         this.audio = data.audio.map(s => {
           const tmp = new SoundsAudio();
           tmp.load(s);
@@ -208,8 +212,8 @@ class SoundsEvent {
       });
     }
     if (data.filter !== undefined) {
-      if (typeof data.filter === "string") {
-        if (typeof window[data.filter] === "function") {
+      if ((0,engine_root_window_.isString)(data.filter)) {
+        if ((0,engine_root_window_.isFunction)(window[data.filter])) {
           this.filter = window[data.filter];
         }
       } else {
@@ -298,6 +302,7 @@ class SoundsIcons {
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/SoundsVolume.js
+
 class SoundsVolume {
   constructor() {
     this.value = 100;
@@ -309,7 +314,7 @@ class SoundsVolume {
     if (data === undefined) {
       return;
     }
-    if (typeof data === "object") {
+    if ((0,engine_root_window_.isObject)(data)) {
       if (data.max !== undefined) {
         this.max = data.max;
       }
@@ -358,8 +363,6 @@ class Sounds {
     }
   }
 }
-// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
-var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/utils.js
 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]);
@@ -381,7 +384,6 @@ function getNoteFrequency(note) {
   if (!result || !result.length) {
     return;
   }
-  console.log(result);
   const noteKey = result[2] || result[0],
     noteItem = notes.get(noteKey);
   if (!noteItem) {
@@ -392,7 +394,36 @@ function getNoteFrequency(note) {
 ;// CONCATENATED MODULE: ./dist/browser/SoundsInstance.js
 
 
-
+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";
@@ -404,6 +435,234 @@ function setIconStyle(icon, top, left, display, zIndex, width, margin) {
 }
 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) {
+            (0,engine_root_window_.executeOnSingleOrMultiple)(event.event, item => {
+              this._engine.removeEventListener(item, cb);
+            });
+            return;
+          }
+          if (event.filter && !event.filter(args)) {
+            return;
+          }
+          if (event.audio) {
+            this._playBuffer((0,engine_root_window_.itemFromSingleOrMultiple)(event.audio));
+          } else if (event.melodies) {
+            const melody = (0,engine_root_window_.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_root_window_.itemFromArray)(event.notes);
+            await this._playNote([note], 0, false);
+          }
+        };
+        (0,engine_root_window_.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 = (0,engine_root_window_.executeOnSingleOrMultiple)(value, async (_, idx) => {
+        return this._playNoteValue(notes, noteIdx, idx);
+      });
+      await ((0,engine_root_window_.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 = (0,engine_root_window_.itemFromSingleOrMultiple)(note.value, valueIdx, true);
+      try {
+        const freq = getNoteFrequency(value);
+        if (!(0,engine_root_window_.isNumber)(freq)) {
+          return;
+        }
+        await this._playFrequency(freq, note.duration);
+      } catch (e) {
+        (0,engine_root_window_.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;
+      }
+      (0,engine_root_window_.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;
@@ -414,7 +673,7 @@ class SoundsInstance {
     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;
@@ -437,309 +696,90 @@ 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,
+    const canvas = container.canvas.element,
+      pos = {
+        top: canvas.offsetTop,
+        right: canvas.offsetLeft + canvas.offsetWidth
+      },
+      {
+        mute,
+        unmute,
+        volumeDown,
+        volumeUp
+      } = soundsOptions.icons,
       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_root_window_.executeOnSingleOrMultiple)(event.event, item => {
-            this._engine.removeEventListener(item, cb);
-          });
-          return;
-        }
-        if (event.filter && !event.filter(args)) {
-          return;
-        }
-        if (event.audio) {
-          this._playBuffer((0,engine_root_window_.itemFromSingleOrMultiple)(event.audio));
-        } else if (event.melodies) {
-          const melody = (0,engine_root_window_.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_root_window_.itemFromArray)(event.notes);
-          await this._playNote([note], 0, false);
-        }
-      };
-      (0,engine_root_window_.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
+    this._muteImg = initImage({
+      container,
+      options,
+      pos,
+      display: "block",
+      iconOptions: mute,
+      margin,
+      rightOffsets: [volumeDown.width, volumeUp.width],
+      clickCb: toggleMute
     });
-  }
-  _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();
+    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 = (0,engine_root_window_.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();
+      }
     });
-    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_root_window_.itemFromSingleOrMultiple)(note.value, valueIdx, true);
-    try {
-      const freq = getNoteFrequency(value);
-      if (typeof freq !== "number") {
-        return;
+    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 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_root_window_.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);
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/index.js
@@ -754,23 +794,21 @@ 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;
   }
 }
-async function loadSoundsPlugin(engine) {
-  const plugin = new SoundsPlugin(engine);
-  await engine.addPlugin(plugin);
+async function loadSoundsPlugin(engine, refresh = true) {
+  await engine.addPlugin(new SoundsPlugin(engine), refresh);
 }
 })();