@tsparticles/plugin-sounds
Advanced tools
Comparing version 3.0.3 to 3.1.0
@@ -0,3 +1,10 @@ | ||
import { mouseDownEvent, touchStartEvent, } from "@tsparticles/engine"; | ||
import { Sounds } from "./Options/Classes/Sounds.js"; | ||
import { SoundsInstance } from "./SoundsInstance.js"; | ||
import { unmuteWindow } from "./utils.js"; | ||
const generalFirstClickHandler = () => { | ||
removeEventListener(mouseDownEvent, generalFirstClickHandler); | ||
removeEventListener(touchStartEvent, generalFirstClickHandler); | ||
unmuteWindow(); | ||
}; | ||
class SoundsPlugin { | ||
@@ -7,2 +14,8 @@ constructor(engine) { | ||
this._engine = engine; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(mouseDownEvent, generalFirstClickHandler, listenerOptions); | ||
addEventListener(touchStartEvent, generalFirstClickHandler, listenerOptions); | ||
} | ||
@@ -9,0 +22,0 @@ getPlugin(container) { |
@@ -6,2 +6,3 @@ import { SoundsEvent } from "./SoundsEvent.js"; | ||
constructor() { | ||
this.autoPlay = true; | ||
this.enable = false; | ||
@@ -16,2 +17,5 @@ this.events = []; | ||
} | ||
if (data.autoPlay !== undefined) { | ||
this.autoPlay = data.autoPlay; | ||
} | ||
if (data.enable !== undefined) { | ||
@@ -18,0 +22,0 @@ this.enable = data.enable; |
@@ -44,6 +44,7 @@ import { isArray, isFunction, isString, } from "@tsparticles/engine"; | ||
} | ||
if (data.filter !== undefined) { | ||
if (data.filter) { | ||
if (isString(data.filter)) { | ||
if (isFunction(window[data.filter])) { | ||
this.filter = window[data.filter]; | ||
const filterFunc = window[data.filter]; | ||
if (isFunction(filterFunc)) { | ||
this.filter = filterFunc; | ||
} | ||
@@ -50,0 +51,0 @@ } |
@@ -5,2 +5,3 @@ export class SoundsIcon { | ||
this.height = 24; | ||
this.style = ""; | ||
} | ||
@@ -7,0 +8,0 @@ load(data) { |
@@ -8,2 +8,3 @@ import { SoundsIcon } from "./SoundsIcon.js"; | ||
this.volumeUp = new SoundsIcon(); | ||
this.enable = false; | ||
this.mute.svg = `<?xml version="1.0"?> | ||
@@ -50,2 +51,5 @@ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px" | ||
} | ||
if (data.enable !== undefined) { | ||
this.enable = data.enable; | ||
} | ||
this.mute.load(data.mute); | ||
@@ -52,0 +56,0 @@ this.unmute.load(data.unmute); |
@@ -1,10 +0,16 @@ | ||
import { clamp, executeOnSingleOrMultiple, getLogger, isArray, isNumber, itemFromArray, itemFromSingleOrMultiple, } from "@tsparticles/engine"; | ||
import { getNoteFrequency } from "./utils.js"; | ||
import { clamp, executeOnSingleOrMultiple, getLogger, isArray, isNumber, itemFromArray, itemFromSingleOrMultiple, mouseDownEvent, percentDenominator, touchStartEvent, } from "@tsparticles/engine"; | ||
import { getNoteFrequency, isWindowMuted, unmuteWindow } from "./utils.js"; | ||
const zIndexOffset = 1, rightOffset = 1, minVolume = 0; | ||
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); | ||
const img = document.createElement("img"), { clickCb, container, display, iconOptions, margin, options, pos, rightOffsets } = data, { width, path, style, svg } = iconOptions, defaultAccumulator = 0; | ||
setIconStyle(img, pos.top + margin, pos.right - | ||
(margin * (rightOffsets.length + rightOffset) + | ||
width + | ||
rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style); | ||
img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : ""); | ||
const parent = container.canvas.element?.parentNode || document.body; | ||
const parent = container.canvas.element?.parentNode ?? document.body; | ||
parent.append(img); | ||
img.addEventListener("click", clickCb); | ||
img.addEventListener("click", () => { | ||
void clickCb(); | ||
}); | ||
return img; | ||
@@ -18,3 +24,3 @@ } | ||
} | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin) { | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin, style) { | ||
icon.style.userSelect = "none"; | ||
@@ -26,3 +32,4 @@ icon.style.webkitUserSelect = "none"; | ||
icon.style.display = display; | ||
icon.style.zIndex = `${zIndex + 1}`; | ||
icon.style.zIndex = `${zIndex + zIndexOffset}`; | ||
icon.style.cssText += style; | ||
} | ||
@@ -48,3 +55,3 @@ export class SoundsInstance { | ||
const cb = (args) => { | ||
(async () => { | ||
void (async () => { | ||
const filterNotValid = event.filter && !event.filter(args); | ||
@@ -54,3 +61,3 @@ if (this._container !== args.container) { | ||
} | ||
if (!this._container || this._container.muted || this._container.destroyed) { | ||
if (!this._container || !!this._container.muted || this._container.destroyed) { | ||
executeOnSingleOrMultiple(event.event, (item) => { | ||
@@ -64,2 +71,3 @@ this._engine.removeEventListener(item, cb); | ||
} | ||
const defaultNoteIndex = 0; | ||
if (event.audio) { | ||
@@ -71,6 +79,6 @@ this._playBuffer(itemFromSingleOrMultiple(event.audio)); | ||
if (melody.melodies.length) { | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop))); | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, defaultNoteIndex, melody.loop))); | ||
} | ||
else { | ||
await this._playNote(melody.notes, 0, melody.loop); | ||
await this._playNote(melody.notes, defaultNoteIndex, melody.loop); | ||
} | ||
@@ -80,3 +88,3 @@ } | ||
const note = itemFromArray(event.notes); | ||
await this._playNote([note], 0, false); | ||
await this._playNote([note], defaultNoteIndex, false); | ||
} | ||
@@ -90,7 +98,4 @@ })(); | ||
}; | ||
this._mute = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
return; | ||
} | ||
this._mute = async () => { | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
for (const source of this._audioSources) { | ||
@@ -102,3 +107,3 @@ this._removeAudioSource(source); | ||
} | ||
container.audioContext.close(); | ||
await audioContext.close(); | ||
container.audioContext = undefined; | ||
@@ -123,6 +128,6 @@ this._engine.dispatchEvent("soundsMuted", { container: this._container }); | ||
this._playFrequency = async (frequency, duration) => { | ||
if (!this._container.audioContext || !this._gain) { | ||
if (!this._gain || this._container.muted) { | ||
return; | ||
} | ||
const oscillator = this._addOscillator(this._container.audioContext); | ||
const audioContext = this._getAudioContext(), oscillator = this._addOscillator(audioContext); | ||
oscillator.connect(this._gain); | ||
@@ -140,10 +145,9 @@ oscillator.type = "sine"; | ||
this._playMuteSound = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
if (this._container.muted) { | ||
return; | ||
} | ||
const gain = container.audioContext.createGain(); | ||
gain.connect(container.audioContext.destination); | ||
const audioContext = this._getAudioContext(), gain = audioContext.createGain(); | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = 0; | ||
const oscillator = container.audioContext.createOscillator(); | ||
const oscillator = audioContext.createOscillator(); | ||
oscillator.connect(gain); | ||
@@ -172,3 +176,4 @@ oscillator.type = "sine"; | ||
await (isArray(promises) ? Promise.allSettled(promises) : promises); | ||
let nextNoteIdx = noteIdx + 1; | ||
const indexOffset = 1; | ||
let nextNoteIdx = noteIdx + indexOffset; | ||
if (loop && nextNoteIdx >= notes.length) { | ||
@@ -202,3 +207,4 @@ nextNoteIdx = nextNoteIdx % notes.length; | ||
source.disconnect(); | ||
this._audioSources.splice(this._audioSources.indexOf(source), 1); | ||
const deleteCount = 1; | ||
this._audioSources.splice(this._audioSources.indexOf(source), deleteCount); | ||
}; | ||
@@ -210,6 +216,3 @@ this._unmute = () => { | ||
} | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
const { audioContext } = container; | ||
const audioContext = this._getAudioContext(); | ||
if (!this._audioSources) { | ||
@@ -220,3 +223,3 @@ this._audioSources = []; | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = soundsOptions.volume.value / 100; | ||
gain.gain.value = soundsOptions.volume.value / percentDenominator; | ||
this._gain = gain; | ||
@@ -227,3 +230,7 @@ this._initEvents(); | ||
this._updateMuteIcons = () => { | ||
const container = this._container, muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable || !soundsOptions.icons.enable) { | ||
return; | ||
} | ||
const muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
if (muteImg) { | ||
@@ -237,9 +244,9 @@ muteImg.style.display = container.muted ? "block" : "none"; | ||
this._updateMuteStatus = async () => { | ||
const container = this._container; | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
if (container.muted) { | ||
await container.audioContext?.suspend(); | ||
this._mute(); | ||
await audioContext?.suspend(); | ||
await this._mute(); | ||
} | ||
else { | ||
await container.audioContext?.resume(); | ||
await audioContext?.resume(); | ||
this._unmute(); | ||
@@ -256,3 +263,3 @@ this._playMuteSound(); | ||
let stateChanged = false; | ||
if (this._volume <= 0 && !container.muted) { | ||
if (this._volume <= minVolume && !container.muted) { | ||
this._volume = 0; | ||
@@ -262,3 +269,3 @@ container.muted = true; | ||
} | ||
else if (this._volume > 0 && container.muted) { | ||
else if (this._volume > minVolume && container.muted) { | ||
container.muted = false; | ||
@@ -272,3 +279,3 @@ stateChanged = true; | ||
if (this._gain?.gain) { | ||
this._gain.gain.value = this._volume / 100; | ||
this._gain.gain.value = this._volume / percentDenominator; | ||
} | ||
@@ -287,2 +294,16 @@ }; | ||
} | ||
if (soundsOptions.autoPlay && isWindowMuted()) { | ||
const firstClickHandler = () => { | ||
removeEventListener(mouseDownEvent, firstClickHandler); | ||
removeEventListener(touchStartEvent, firstClickHandler); | ||
unmuteWindow(); | ||
void this.unmute(); | ||
}; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(mouseDownEvent, firstClickHandler, listenerOptions); | ||
addEventListener(touchStartEvent, firstClickHandler, listenerOptions); | ||
} | ||
this._volume = soundsOptions.volume.value; | ||
@@ -295,3 +316,3 @@ const events = soundsOptions.events; | ||
} | ||
executeOnSingleOrMultiple(event.audio, async (audio) => { | ||
const promises = executeOnSingleOrMultiple(event.audio, async (audio) => { | ||
const response = await fetch(audio.source); | ||
@@ -301,9 +322,18 @@ if (!response.ok) { | ||
} | ||
const arrayBuffer = await response.arrayBuffer(); | ||
container.audioContext = new AudioContext(); | ||
const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer); | ||
const arrayBuffer = await response.arrayBuffer(), audioContext = this._getAudioContext(), audioBuffer = await audioContext.decodeAudioData(arrayBuffer); | ||
this._audioMap.set(audio.source, audioBuffer); | ||
}); | ||
if (promises instanceof Promise) { | ||
await promises; | ||
} | ||
else { | ||
await Promise.allSettled(promises); | ||
} | ||
} | ||
} | ||
async mute() { | ||
if (!this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async start() { | ||
@@ -318,8 +348,5 @@ const container = this._container, options = container.actualOptions, soundsOptions = options.sounds; | ||
right: canvas.offsetLeft + canvas.offsetWidth, | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10; | ||
const toggleMute = async () => { | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
}; | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10, toggleMute = async () => { | ||
await this.toggleMute(); | ||
}, enableIcons = soundsOptions.icons.enable, display = enableIcons ? "block" : "none"; | ||
this._muteImg = initImage({ | ||
@@ -329,3 +356,3 @@ container, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: mute, | ||
@@ -350,3 +377,3 @@ margin, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeDown, | ||
@@ -356,7 +383,3 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeDown(); | ||
}, | ||
@@ -368,3 +391,3 @@ }); | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeUp, | ||
@@ -374,18 +397,56 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeUp(); | ||
}, | ||
}); | ||
if (!isWindowMuted() && soundsOptions.autoPlay) { | ||
await this.unmute(); | ||
} | ||
} | ||
stop() { | ||
this._container.muted = true; | ||
this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
void (async () => { | ||
await this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
})(); | ||
} | ||
async toggleMute() { | ||
const container = this._container; | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
} | ||
async unmute() { | ||
if (this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async volumeDown() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
async volumeUp() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
_getAudioContext() { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
return container.audioContext; | ||
} | ||
} |
@@ -16,11 +16,18 @@ const notes = new Map(); | ||
export function getNoteFrequency(note) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note); | ||
if (!result || !result.length) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note), groupKey = 2, defaultMatchKey = 0, innerGroupKey = 3; | ||
if (!result?.length) { | ||
return; | ||
} | ||
const noteKey = result[2] || result[0], noteItem = notes.get(noteKey); | ||
const noteKey = result[groupKey] || result[defaultMatchKey], noteItem = notes.get(noteKey); | ||
if (!noteItem) { | ||
return; | ||
} | ||
return noteItem[parseInt(result[3] || "0")]; | ||
return noteItem[parseInt(result[innerGroupKey] || "0")]; | ||
} | ||
let muted = true; | ||
export const isWindowMuted = () => { | ||
return muted; | ||
}; | ||
export const unmuteWindow = () => { | ||
muted = false; | ||
}; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.loadSoundsPlugin = void 0; | ||
const engine_1 = require("@tsparticles/engine"); | ||
const Sounds_js_1 = require("./Options/Classes/Sounds.js"); | ||
const SoundsInstance_js_1 = require("./SoundsInstance.js"); | ||
const utils_js_1 = require("./utils.js"); | ||
const generalFirstClickHandler = () => { | ||
removeEventListener(engine_1.mouseDownEvent, generalFirstClickHandler); | ||
removeEventListener(engine_1.touchStartEvent, generalFirstClickHandler); | ||
(0, utils_js_1.unmuteWindow)(); | ||
}; | ||
class SoundsPlugin { | ||
@@ -10,2 +17,8 @@ constructor(engine) { | ||
this._engine = engine; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(engine_1.mouseDownEvent, generalFirstClickHandler, listenerOptions); | ||
addEventListener(engine_1.touchStartEvent, generalFirstClickHandler, listenerOptions); | ||
} | ||
@@ -12,0 +25,0 @@ getPlugin(container) { |
@@ -9,2 +9,3 @@ "use strict"; | ||
constructor() { | ||
this.autoPlay = true; | ||
this.enable = false; | ||
@@ -19,2 +20,5 @@ this.events = []; | ||
} | ||
if (data.autoPlay !== undefined) { | ||
this.autoPlay = data.autoPlay; | ||
} | ||
if (data.enable !== undefined) { | ||
@@ -21,0 +25,0 @@ this.enable = data.enable; |
@@ -47,6 +47,7 @@ "use strict"; | ||
} | ||
if (data.filter !== undefined) { | ||
if (data.filter) { | ||
if ((0, engine_1.isString)(data.filter)) { | ||
if ((0, engine_1.isFunction)(window[data.filter])) { | ||
this.filter = window[data.filter]; | ||
const filterFunc = window[data.filter]; | ||
if ((0, engine_1.isFunction)(filterFunc)) { | ||
this.filter = filterFunc; | ||
} | ||
@@ -53,0 +54,0 @@ } |
@@ -8,2 +8,3 @@ "use strict"; | ||
this.height = 24; | ||
this.style = ""; | ||
} | ||
@@ -10,0 +11,0 @@ load(data) { |
@@ -11,2 +11,3 @@ "use strict"; | ||
this.volumeUp = new SoundsIcon_js_1.SoundsIcon(); | ||
this.enable = false; | ||
this.mute.svg = `<?xml version="1.0"?> | ||
@@ -53,2 +54,5 @@ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px" | ||
} | ||
if (data.enable !== undefined) { | ||
this.enable = data.enable; | ||
} | ||
this.mute.load(data.mute); | ||
@@ -55,0 +59,0 @@ this.unmute.load(data.unmute); |
@@ -6,9 +6,15 @@ "use strict"; | ||
const utils_js_1 = require("./utils.js"); | ||
const zIndexOffset = 1, rightOffset = 1, minVolume = 0; | ||
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); | ||
const img = document.createElement("img"), { clickCb, container, display, iconOptions, margin, options, pos, rightOffsets } = data, { width, path, style, svg } = iconOptions, defaultAccumulator = 0; | ||
setIconStyle(img, pos.top + margin, pos.right - | ||
(margin * (rightOffsets.length + rightOffset) + | ||
width + | ||
rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style); | ||
img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : ""); | ||
const parent = container.canvas.element?.parentNode || document.body; | ||
const parent = container.canvas.element?.parentNode ?? document.body; | ||
parent.append(img); | ||
img.addEventListener("click", clickCb); | ||
img.addEventListener("click", () => { | ||
void clickCb(); | ||
}); | ||
return img; | ||
@@ -22,3 +28,3 @@ } | ||
} | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin) { | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin, style) { | ||
icon.style.userSelect = "none"; | ||
@@ -30,3 +36,4 @@ icon.style.webkitUserSelect = "none"; | ||
icon.style.display = display; | ||
icon.style.zIndex = `${zIndex + 1}`; | ||
icon.style.zIndex = `${zIndex + zIndexOffset}`; | ||
icon.style.cssText += style; | ||
} | ||
@@ -52,3 +59,3 @@ class SoundsInstance { | ||
const cb = (args) => { | ||
(async () => { | ||
void (async () => { | ||
const filterNotValid = event.filter && !event.filter(args); | ||
@@ -58,3 +65,3 @@ if (this._container !== args.container) { | ||
} | ||
if (!this._container || this._container.muted || this._container.destroyed) { | ||
if (!this._container || !!this._container.muted || this._container.destroyed) { | ||
(0, engine_1.executeOnSingleOrMultiple)(event.event, (item) => { | ||
@@ -68,2 +75,3 @@ this._engine.removeEventListener(item, cb); | ||
} | ||
const defaultNoteIndex = 0; | ||
if (event.audio) { | ||
@@ -75,6 +83,6 @@ this._playBuffer((0, engine_1.itemFromSingleOrMultiple)(event.audio)); | ||
if (melody.melodies.length) { | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop))); | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, defaultNoteIndex, melody.loop))); | ||
} | ||
else { | ||
await this._playNote(melody.notes, 0, melody.loop); | ||
await this._playNote(melody.notes, defaultNoteIndex, melody.loop); | ||
} | ||
@@ -84,3 +92,3 @@ } | ||
const note = (0, engine_1.itemFromArray)(event.notes); | ||
await this._playNote([note], 0, false); | ||
await this._playNote([note], defaultNoteIndex, false); | ||
} | ||
@@ -94,7 +102,4 @@ })(); | ||
}; | ||
this._mute = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
return; | ||
} | ||
this._mute = async () => { | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
for (const source of this._audioSources) { | ||
@@ -106,3 +111,3 @@ this._removeAudioSource(source); | ||
} | ||
container.audioContext.close(); | ||
await audioContext.close(); | ||
container.audioContext = undefined; | ||
@@ -127,6 +132,6 @@ this._engine.dispatchEvent("soundsMuted", { container: this._container }); | ||
this._playFrequency = async (frequency, duration) => { | ||
if (!this._container.audioContext || !this._gain) { | ||
if (!this._gain || this._container.muted) { | ||
return; | ||
} | ||
const oscillator = this._addOscillator(this._container.audioContext); | ||
const audioContext = this._getAudioContext(), oscillator = this._addOscillator(audioContext); | ||
oscillator.connect(this._gain); | ||
@@ -144,10 +149,9 @@ oscillator.type = "sine"; | ||
this._playMuteSound = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
if (this._container.muted) { | ||
return; | ||
} | ||
const gain = container.audioContext.createGain(); | ||
gain.connect(container.audioContext.destination); | ||
const audioContext = this._getAudioContext(), gain = audioContext.createGain(); | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = 0; | ||
const oscillator = container.audioContext.createOscillator(); | ||
const oscillator = audioContext.createOscillator(); | ||
oscillator.connect(gain); | ||
@@ -176,3 +180,4 @@ oscillator.type = "sine"; | ||
await ((0, engine_1.isArray)(promises) ? Promise.allSettled(promises) : promises); | ||
let nextNoteIdx = noteIdx + 1; | ||
const indexOffset = 1; | ||
let nextNoteIdx = noteIdx + indexOffset; | ||
if (loop && nextNoteIdx >= notes.length) { | ||
@@ -206,3 +211,4 @@ nextNoteIdx = nextNoteIdx % notes.length; | ||
source.disconnect(); | ||
this._audioSources.splice(this._audioSources.indexOf(source), 1); | ||
const deleteCount = 1; | ||
this._audioSources.splice(this._audioSources.indexOf(source), deleteCount); | ||
}; | ||
@@ -214,6 +220,3 @@ this._unmute = () => { | ||
} | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
const { audioContext } = container; | ||
const audioContext = this._getAudioContext(); | ||
if (!this._audioSources) { | ||
@@ -224,3 +227,3 @@ this._audioSources = []; | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = soundsOptions.volume.value / 100; | ||
gain.gain.value = soundsOptions.volume.value / engine_1.percentDenominator; | ||
this._gain = gain; | ||
@@ -231,3 +234,7 @@ this._initEvents(); | ||
this._updateMuteIcons = () => { | ||
const container = this._container, muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable || !soundsOptions.icons.enable) { | ||
return; | ||
} | ||
const muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
if (muteImg) { | ||
@@ -241,9 +248,9 @@ muteImg.style.display = container.muted ? "block" : "none"; | ||
this._updateMuteStatus = async () => { | ||
const container = this._container; | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
if (container.muted) { | ||
await container.audioContext?.suspend(); | ||
this._mute(); | ||
await audioContext?.suspend(); | ||
await this._mute(); | ||
} | ||
else { | ||
await container.audioContext?.resume(); | ||
await audioContext?.resume(); | ||
this._unmute(); | ||
@@ -260,3 +267,3 @@ this._playMuteSound(); | ||
let stateChanged = false; | ||
if (this._volume <= 0 && !container.muted) { | ||
if (this._volume <= minVolume && !container.muted) { | ||
this._volume = 0; | ||
@@ -266,3 +273,3 @@ container.muted = true; | ||
} | ||
else if (this._volume > 0 && container.muted) { | ||
else if (this._volume > minVolume && container.muted) { | ||
container.muted = false; | ||
@@ -276,3 +283,3 @@ stateChanged = true; | ||
if (this._gain?.gain) { | ||
this._gain.gain.value = this._volume / 100; | ||
this._gain.gain.value = this._volume / engine_1.percentDenominator; | ||
} | ||
@@ -291,2 +298,16 @@ }; | ||
} | ||
if (soundsOptions.autoPlay && (0, utils_js_1.isWindowMuted)()) { | ||
const firstClickHandler = () => { | ||
removeEventListener(engine_1.mouseDownEvent, firstClickHandler); | ||
removeEventListener(engine_1.touchStartEvent, firstClickHandler); | ||
(0, utils_js_1.unmuteWindow)(); | ||
void this.unmute(); | ||
}; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(engine_1.mouseDownEvent, firstClickHandler, listenerOptions); | ||
addEventListener(engine_1.touchStartEvent, firstClickHandler, listenerOptions); | ||
} | ||
this._volume = soundsOptions.volume.value; | ||
@@ -299,3 +320,3 @@ const events = soundsOptions.events; | ||
} | ||
(0, engine_1.executeOnSingleOrMultiple)(event.audio, async (audio) => { | ||
const promises = (0, engine_1.executeOnSingleOrMultiple)(event.audio, async (audio) => { | ||
const response = await fetch(audio.source); | ||
@@ -305,9 +326,18 @@ if (!response.ok) { | ||
} | ||
const arrayBuffer = await response.arrayBuffer(); | ||
container.audioContext = new AudioContext(); | ||
const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer); | ||
const arrayBuffer = await response.arrayBuffer(), audioContext = this._getAudioContext(), audioBuffer = await audioContext.decodeAudioData(arrayBuffer); | ||
this._audioMap.set(audio.source, audioBuffer); | ||
}); | ||
if (promises instanceof Promise) { | ||
await promises; | ||
} | ||
else { | ||
await Promise.allSettled(promises); | ||
} | ||
} | ||
} | ||
async mute() { | ||
if (!this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async start() { | ||
@@ -322,8 +352,5 @@ const container = this._container, options = container.actualOptions, soundsOptions = options.sounds; | ||
right: canvas.offsetLeft + canvas.offsetWidth, | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10; | ||
const toggleMute = async () => { | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
}; | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10, toggleMute = async () => { | ||
await this.toggleMute(); | ||
}, enableIcons = soundsOptions.icons.enable, display = enableIcons ? "block" : "none"; | ||
this._muteImg = initImage({ | ||
@@ -333,3 +360,3 @@ container, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: mute, | ||
@@ -354,3 +381,3 @@ margin, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeDown, | ||
@@ -360,7 +387,3 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeDown(); | ||
}, | ||
@@ -372,3 +395,3 @@ }); | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeUp, | ||
@@ -378,19 +401,57 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeUp(); | ||
}, | ||
}); | ||
if (!(0, utils_js_1.isWindowMuted)() && soundsOptions.autoPlay) { | ||
await this.unmute(); | ||
} | ||
} | ||
stop() { | ||
this._container.muted = true; | ||
this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
void (async () => { | ||
await this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
})(); | ||
} | ||
async toggleMute() { | ||
const container = this._container; | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
} | ||
async unmute() { | ||
if (this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async volumeDown() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
async volumeUp() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
_getAudioContext() { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
return container.audioContext; | ||
} | ||
} | ||
exports.SoundsInstance = SoundsInstance; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getNoteFrequency = void 0; | ||
exports.unmuteWindow = exports.isWindowMuted = exports.getNoteFrequency = void 0; | ||
const notes = new Map(); | ||
@@ -19,12 +19,21 @@ notes.set("C", [16.35, 32.7, 65.41, 130.81, 261.63, 523.25, 1046.5, 2093.0, 4186.01]); | ||
function getNoteFrequency(note) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note); | ||
if (!result || !result.length) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note), groupKey = 2, defaultMatchKey = 0, innerGroupKey = 3; | ||
if (!result?.length) { | ||
return; | ||
} | ||
const noteKey = result[2] || result[0], noteItem = notes.get(noteKey); | ||
const noteKey = result[groupKey] || result[defaultMatchKey], noteItem = notes.get(noteKey); | ||
if (!noteItem) { | ||
return; | ||
} | ||
return noteItem[parseInt(result[3] || "0")]; | ||
return noteItem[parseInt(result[innerGroupKey] || "0")]; | ||
} | ||
exports.getNoteFrequency = getNoteFrequency; | ||
let muted = true; | ||
const isWindowMuted = () => { | ||
return muted; | ||
}; | ||
exports.isWindowMuted = isWindowMuted; | ||
const unmuteWindow = () => { | ||
muted = false; | ||
}; | ||
exports.unmuteWindow = unmuteWindow; |
@@ -0,3 +1,10 @@ | ||
import { mouseDownEvent, touchStartEvent, } from "@tsparticles/engine"; | ||
import { Sounds } from "./Options/Classes/Sounds.js"; | ||
import { SoundsInstance } from "./SoundsInstance.js"; | ||
import { unmuteWindow } from "./utils.js"; | ||
const generalFirstClickHandler = () => { | ||
removeEventListener(mouseDownEvent, generalFirstClickHandler); | ||
removeEventListener(touchStartEvent, generalFirstClickHandler); | ||
unmuteWindow(); | ||
}; | ||
class SoundsPlugin { | ||
@@ -7,2 +14,8 @@ constructor(engine) { | ||
this._engine = engine; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(mouseDownEvent, generalFirstClickHandler, listenerOptions); | ||
addEventListener(touchStartEvent, generalFirstClickHandler, listenerOptions); | ||
} | ||
@@ -9,0 +22,0 @@ getPlugin(container) { |
@@ -6,2 +6,3 @@ import { SoundsEvent } from "./SoundsEvent.js"; | ||
constructor() { | ||
this.autoPlay = true; | ||
this.enable = false; | ||
@@ -16,2 +17,5 @@ this.events = []; | ||
} | ||
if (data.autoPlay !== undefined) { | ||
this.autoPlay = data.autoPlay; | ||
} | ||
if (data.enable !== undefined) { | ||
@@ -18,0 +22,0 @@ this.enable = data.enable; |
@@ -44,6 +44,7 @@ import { isArray, isFunction, isString, } from "@tsparticles/engine"; | ||
} | ||
if (data.filter !== undefined) { | ||
if (data.filter) { | ||
if (isString(data.filter)) { | ||
if (isFunction(window[data.filter])) { | ||
this.filter = window[data.filter]; | ||
const filterFunc = window[data.filter]; | ||
if (isFunction(filterFunc)) { | ||
this.filter = filterFunc; | ||
} | ||
@@ -50,0 +51,0 @@ } |
@@ -5,2 +5,3 @@ export class SoundsIcon { | ||
this.height = 24; | ||
this.style = ""; | ||
} | ||
@@ -7,0 +8,0 @@ load(data) { |
@@ -8,2 +8,3 @@ import { SoundsIcon } from "./SoundsIcon.js"; | ||
this.volumeUp = new SoundsIcon(); | ||
this.enable = false; | ||
this.mute.svg = `<?xml version="1.0"?> | ||
@@ -50,2 +51,5 @@ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px" | ||
} | ||
if (data.enable !== undefined) { | ||
this.enable = data.enable; | ||
} | ||
this.mute.load(data.mute); | ||
@@ -52,0 +56,0 @@ this.unmute.load(data.unmute); |
@@ -1,10 +0,16 @@ | ||
import { clamp, executeOnSingleOrMultiple, getLogger, isArray, isNumber, itemFromArray, itemFromSingleOrMultiple, } from "@tsparticles/engine"; | ||
import { getNoteFrequency } from "./utils.js"; | ||
import { clamp, executeOnSingleOrMultiple, getLogger, isArray, isNumber, itemFromArray, itemFromSingleOrMultiple, mouseDownEvent, percentDenominator, touchStartEvent, } from "@tsparticles/engine"; | ||
import { getNoteFrequency, isWindowMuted, unmuteWindow } from "./utils.js"; | ||
const zIndexOffset = 1, rightOffset = 1, minVolume = 0; | ||
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); | ||
const img = document.createElement("img"), { clickCb, container, display, iconOptions, margin, options, pos, rightOffsets } = data, { width, path, style, svg } = iconOptions, defaultAccumulator = 0; | ||
setIconStyle(img, pos.top + margin, pos.right - | ||
(margin * (rightOffsets.length + rightOffset) + | ||
width + | ||
rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style); | ||
img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : ""); | ||
const parent = container.canvas.element?.parentNode || document.body; | ||
const parent = container.canvas.element?.parentNode ?? document.body; | ||
parent.append(img); | ||
img.addEventListener("click", clickCb); | ||
img.addEventListener("click", () => { | ||
void clickCb(); | ||
}); | ||
return img; | ||
@@ -18,3 +24,3 @@ } | ||
} | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin) { | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin, style) { | ||
icon.style.userSelect = "none"; | ||
@@ -26,3 +32,4 @@ icon.style.webkitUserSelect = "none"; | ||
icon.style.display = display; | ||
icon.style.zIndex = `${zIndex + 1}`; | ||
icon.style.zIndex = `${zIndex + zIndexOffset}`; | ||
icon.style.cssText += style; | ||
} | ||
@@ -48,3 +55,3 @@ export class SoundsInstance { | ||
const cb = (args) => { | ||
(async () => { | ||
void (async () => { | ||
const filterNotValid = event.filter && !event.filter(args); | ||
@@ -54,3 +61,3 @@ if (this._container !== args.container) { | ||
} | ||
if (!this._container || this._container.muted || this._container.destroyed) { | ||
if (!this._container || !!this._container.muted || this._container.destroyed) { | ||
executeOnSingleOrMultiple(event.event, (item) => { | ||
@@ -64,2 +71,3 @@ this._engine.removeEventListener(item, cb); | ||
} | ||
const defaultNoteIndex = 0; | ||
if (event.audio) { | ||
@@ -71,6 +79,6 @@ this._playBuffer(itemFromSingleOrMultiple(event.audio)); | ||
if (melody.melodies.length) { | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop))); | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, defaultNoteIndex, melody.loop))); | ||
} | ||
else { | ||
await this._playNote(melody.notes, 0, melody.loop); | ||
await this._playNote(melody.notes, defaultNoteIndex, melody.loop); | ||
} | ||
@@ -80,3 +88,3 @@ } | ||
const note = itemFromArray(event.notes); | ||
await this._playNote([note], 0, false); | ||
await this._playNote([note], defaultNoteIndex, false); | ||
} | ||
@@ -90,7 +98,4 @@ })(); | ||
}; | ||
this._mute = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
return; | ||
} | ||
this._mute = async () => { | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
for (const source of this._audioSources) { | ||
@@ -102,3 +107,3 @@ this._removeAudioSource(source); | ||
} | ||
container.audioContext.close(); | ||
await audioContext.close(); | ||
container.audioContext = undefined; | ||
@@ -123,6 +128,6 @@ this._engine.dispatchEvent("soundsMuted", { container: this._container }); | ||
this._playFrequency = async (frequency, duration) => { | ||
if (!this._container.audioContext || !this._gain) { | ||
if (!this._gain || this._container.muted) { | ||
return; | ||
} | ||
const oscillator = this._addOscillator(this._container.audioContext); | ||
const audioContext = this._getAudioContext(), oscillator = this._addOscillator(audioContext); | ||
oscillator.connect(this._gain); | ||
@@ -140,10 +145,9 @@ oscillator.type = "sine"; | ||
this._playMuteSound = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
if (this._container.muted) { | ||
return; | ||
} | ||
const gain = container.audioContext.createGain(); | ||
gain.connect(container.audioContext.destination); | ||
const audioContext = this._getAudioContext(), gain = audioContext.createGain(); | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = 0; | ||
const oscillator = container.audioContext.createOscillator(); | ||
const oscillator = audioContext.createOscillator(); | ||
oscillator.connect(gain); | ||
@@ -172,3 +176,4 @@ oscillator.type = "sine"; | ||
await (isArray(promises) ? Promise.allSettled(promises) : promises); | ||
let nextNoteIdx = noteIdx + 1; | ||
const indexOffset = 1; | ||
let nextNoteIdx = noteIdx + indexOffset; | ||
if (loop && nextNoteIdx >= notes.length) { | ||
@@ -202,3 +207,4 @@ nextNoteIdx = nextNoteIdx % notes.length; | ||
source.disconnect(); | ||
this._audioSources.splice(this._audioSources.indexOf(source), 1); | ||
const deleteCount = 1; | ||
this._audioSources.splice(this._audioSources.indexOf(source), deleteCount); | ||
}; | ||
@@ -210,6 +216,3 @@ this._unmute = () => { | ||
} | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
const { audioContext } = container; | ||
const audioContext = this._getAudioContext(); | ||
if (!this._audioSources) { | ||
@@ -220,3 +223,3 @@ this._audioSources = []; | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = soundsOptions.volume.value / 100; | ||
gain.gain.value = soundsOptions.volume.value / percentDenominator; | ||
this._gain = gain; | ||
@@ -227,3 +230,7 @@ this._initEvents(); | ||
this._updateMuteIcons = () => { | ||
const container = this._container, muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable || !soundsOptions.icons.enable) { | ||
return; | ||
} | ||
const muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
if (muteImg) { | ||
@@ -237,9 +244,9 @@ muteImg.style.display = container.muted ? "block" : "none"; | ||
this._updateMuteStatus = async () => { | ||
const container = this._container; | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
if (container.muted) { | ||
await container.audioContext?.suspend(); | ||
this._mute(); | ||
await audioContext?.suspend(); | ||
await this._mute(); | ||
} | ||
else { | ||
await container.audioContext?.resume(); | ||
await audioContext?.resume(); | ||
this._unmute(); | ||
@@ -256,3 +263,3 @@ this._playMuteSound(); | ||
let stateChanged = false; | ||
if (this._volume <= 0 && !container.muted) { | ||
if (this._volume <= minVolume && !container.muted) { | ||
this._volume = 0; | ||
@@ -262,3 +269,3 @@ container.muted = true; | ||
} | ||
else if (this._volume > 0 && container.muted) { | ||
else if (this._volume > minVolume && container.muted) { | ||
container.muted = false; | ||
@@ -272,3 +279,3 @@ stateChanged = true; | ||
if (this._gain?.gain) { | ||
this._gain.gain.value = this._volume / 100; | ||
this._gain.gain.value = this._volume / percentDenominator; | ||
} | ||
@@ -287,2 +294,16 @@ }; | ||
} | ||
if (soundsOptions.autoPlay && isWindowMuted()) { | ||
const firstClickHandler = () => { | ||
removeEventListener(mouseDownEvent, firstClickHandler); | ||
removeEventListener(touchStartEvent, firstClickHandler); | ||
unmuteWindow(); | ||
void this.unmute(); | ||
}; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(mouseDownEvent, firstClickHandler, listenerOptions); | ||
addEventListener(touchStartEvent, firstClickHandler, listenerOptions); | ||
} | ||
this._volume = soundsOptions.volume.value; | ||
@@ -295,3 +316,3 @@ const events = soundsOptions.events; | ||
} | ||
executeOnSingleOrMultiple(event.audio, async (audio) => { | ||
const promises = executeOnSingleOrMultiple(event.audio, async (audio) => { | ||
const response = await fetch(audio.source); | ||
@@ -301,9 +322,18 @@ if (!response.ok) { | ||
} | ||
const arrayBuffer = await response.arrayBuffer(); | ||
container.audioContext = new AudioContext(); | ||
const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer); | ||
const arrayBuffer = await response.arrayBuffer(), audioContext = this._getAudioContext(), audioBuffer = await audioContext.decodeAudioData(arrayBuffer); | ||
this._audioMap.set(audio.source, audioBuffer); | ||
}); | ||
if (promises instanceof Promise) { | ||
await promises; | ||
} | ||
else { | ||
await Promise.allSettled(promises); | ||
} | ||
} | ||
} | ||
async mute() { | ||
if (!this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async start() { | ||
@@ -318,8 +348,5 @@ const container = this._container, options = container.actualOptions, soundsOptions = options.sounds; | ||
right: canvas.offsetLeft + canvas.offsetWidth, | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10; | ||
const toggleMute = async () => { | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
}; | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10, toggleMute = async () => { | ||
await this.toggleMute(); | ||
}, enableIcons = soundsOptions.icons.enable, display = enableIcons ? "block" : "none"; | ||
this._muteImg = initImage({ | ||
@@ -329,3 +356,3 @@ container, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: mute, | ||
@@ -350,3 +377,3 @@ margin, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeDown, | ||
@@ -356,7 +383,3 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeDown(); | ||
}, | ||
@@ -368,3 +391,3 @@ }); | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeUp, | ||
@@ -374,18 +397,56 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeUp(); | ||
}, | ||
}); | ||
if (!isWindowMuted() && soundsOptions.autoPlay) { | ||
await this.unmute(); | ||
} | ||
} | ||
stop() { | ||
this._container.muted = true; | ||
this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
void (async () => { | ||
await this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
})(); | ||
} | ||
async toggleMute() { | ||
const container = this._container; | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
} | ||
async unmute() { | ||
if (this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async volumeDown() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
async volumeUp() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
_getAudioContext() { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
return container.audioContext; | ||
} | ||
} |
@@ -16,11 +16,18 @@ const notes = new Map(); | ||
export function getNoteFrequency(note) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note); | ||
if (!result || !result.length) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note), groupKey = 2, defaultMatchKey = 0, innerGroupKey = 3; | ||
if (!result?.length) { | ||
return; | ||
} | ||
const noteKey = result[2] || result[0], noteItem = notes.get(noteKey); | ||
const noteKey = result[groupKey] || result[defaultMatchKey], noteItem = notes.get(noteKey); | ||
if (!noteItem) { | ||
return; | ||
} | ||
return noteItem[parseInt(result[3] || "0")]; | ||
return noteItem[parseInt(result[innerGroupKey] || "0")]; | ||
} | ||
let muted = true; | ||
export const isWindowMuted = () => { | ||
return muted; | ||
}; | ||
export const unmuteWindow = () => { | ||
muted = false; | ||
}; |
{ | ||
"name": "@tsparticles/plugin-sounds", | ||
"version": "3.0.3", | ||
"version": "3.1.0", | ||
"description": "tsParticles sounds plugin", | ||
@@ -89,3 +89,3 @@ "homepage": "https://particles.js.org", | ||
"dependencies": { | ||
"@tsparticles/engine": "^3.0.3" | ||
"@tsparticles/engine": "^3.1.0" | ||
}, | ||
@@ -92,0 +92,0 @@ "publishConfig": { |
@@ -7,3 +7,3 @@ /*! | ||
* How to use? : Check the GitHub README | ||
* v3.0.3 | ||
* v3.1.0 | ||
*/ | ||
@@ -215,6 +215,7 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
} | ||
if (data.filter !== undefined) { | ||
if (data.filter) { | ||
if ((0,engine_root_window_.isString)(data.filter)) { | ||
if ((0,engine_root_window_.isFunction)(window[data.filter])) { | ||
this.filter = window[data.filter]; | ||
const filterFunc = window[data.filter]; | ||
if ((0,engine_root_window_.isFunction)(filterFunc)) { | ||
this.filter = filterFunc; | ||
} | ||
@@ -232,2 +233,3 @@ } else { | ||
this.height = 24; | ||
this.style = ""; | ||
} | ||
@@ -260,2 +262,3 @@ load(data) { | ||
this.volumeUp = new SoundsIcon(); | ||
this.enable = false; | ||
this.mute.svg = `<?xml version="1.0"?> | ||
@@ -302,2 +305,5 @@ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px" | ||
} | ||
if (data.enable !== undefined) { | ||
this.enable = data.enable; | ||
} | ||
this.mute.load(data.mute); | ||
@@ -346,2 +352,3 @@ this.unmute.load(data.unmute); | ||
constructor() { | ||
this.autoPlay = true; | ||
this.enable = false; | ||
@@ -356,2 +363,5 @@ this.events = []; | ||
} | ||
if (data.autoPlay !== undefined) { | ||
this.autoPlay = data.autoPlay; | ||
} | ||
if (data.enable !== undefined) { | ||
@@ -390,7 +400,10 @@ this.enable = data.enable; | ||
const regex = /(([A-G]b?)(\d))|pause/i, | ||
result = regex.exec(note); | ||
if (!result || !result.length) { | ||
result = regex.exec(note), | ||
groupKey = 2, | ||
defaultMatchKey = 0, | ||
innerGroupKey = 3; | ||
if (!result?.length) { | ||
return; | ||
} | ||
const noteKey = result[2] || result[0], | ||
const noteKey = result[groupKey] || result[defaultMatchKey], | ||
noteItem = notes.get(noteKey); | ||
@@ -400,7 +413,17 @@ if (!noteItem) { | ||
} | ||
return noteItem[parseInt(result[3] || "0")]; | ||
return noteItem[parseInt(result[innerGroupKey] || "0")]; | ||
} | ||
let muted = true; | ||
const isWindowMuted = () => { | ||
return muted; | ||
}; | ||
const unmuteWindow = () => { | ||
muted = false; | ||
}; | ||
;// CONCATENATED MODULE: ./dist/browser/SoundsInstance.js | ||
const zIndexOffset = 1, | ||
rightOffset = 1, | ||
minVolume = 0; | ||
function initImage(data) { | ||
@@ -421,9 +444,13 @@ const img = document.createElement("img"), | ||
path, | ||
style, | ||
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); | ||
} = iconOptions, | ||
defaultAccumulator = 0; | ||
setIconStyle(img, pos.top + margin, pos.right - (margin * (rightOffsets.length + rightOffset) + width + rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style); | ||
img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : ""); | ||
const parent = container.canvas.element?.parentNode || document.body; | ||
const parent = container.canvas.element?.parentNode ?? document.body; | ||
parent.append(img); | ||
img.addEventListener("click", clickCb); | ||
img.addEventListener("click", () => { | ||
void clickCb(); | ||
}); | ||
return img; | ||
@@ -437,3 +464,3 @@ } | ||
} | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin) { | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin, style) { | ||
icon.style.userSelect = "none"; | ||
@@ -445,3 +472,4 @@ icon.style.webkitUserSelect = "none"; | ||
icon.style.display = display; | ||
icon.style.zIndex = `${zIndex + 1}`; | ||
icon.style.zIndex = `${zIndex + zIndexOffset}`; | ||
icon.style.cssText += style; | ||
} | ||
@@ -468,3 +496,3 @@ class SoundsInstance { | ||
const cb = args => { | ||
(async () => { | ||
void (async () => { | ||
const filterNotValid = event.filter && !event.filter(args); | ||
@@ -474,3 +502,3 @@ if (this._container !== args.container) { | ||
} | ||
if (!this._container || this._container.muted || this._container.destroyed) { | ||
if (!this._container || !!this._container.muted || this._container.destroyed) { | ||
(0,engine_root_window_.executeOnSingleOrMultiple)(event.event, item => { | ||
@@ -484,2 +512,3 @@ this._engine.removeEventListener(item, cb); | ||
} | ||
const defaultNoteIndex = 0; | ||
if (event.audio) { | ||
@@ -490,9 +519,9 @@ this._playBuffer((0,engine_root_window_.itemFromSingleOrMultiple)(event.audio)); | ||
if (melody.melodies.length) { | ||
await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, 0, melody.loop))); | ||
await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, defaultNoteIndex, melody.loop))); | ||
} else { | ||
await this._playNote(melody.notes, 0, melody.loop); | ||
await this._playNote(melody.notes, defaultNoteIndex, melody.loop); | ||
} | ||
} else if (event.notes) { | ||
const note = (0,engine_root_window_.itemFromArray)(event.notes); | ||
await this._playNote([note], 0, false); | ||
await this._playNote([note], defaultNoteIndex, false); | ||
} | ||
@@ -506,7 +535,5 @@ })(); | ||
}; | ||
this._mute = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
return; | ||
} | ||
this._mute = async () => { | ||
const container = this._container, | ||
audioContext = this._getAudioContext(); | ||
for (const source of this._audioSources) { | ||
@@ -518,3 +545,3 @@ this._removeAudioSource(source); | ||
} | ||
container.audioContext.close(); | ||
await audioContext.close(); | ||
container.audioContext = undefined; | ||
@@ -541,6 +568,7 @@ this._engine.dispatchEvent("soundsMuted", { | ||
this._playFrequency = async (frequency, duration) => { | ||
if (!this._container.audioContext || !this._gain) { | ||
if (!this._gain || this._container.muted) { | ||
return; | ||
} | ||
const oscillator = this._addOscillator(this._container.audioContext); | ||
const audioContext = this._getAudioContext(), | ||
oscillator = this._addOscillator(audioContext); | ||
oscillator.connect(this._gain); | ||
@@ -558,10 +586,10 @@ oscillator.type = "sine"; | ||
this._playMuteSound = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
if (this._container.muted) { | ||
return; | ||
} | ||
const gain = container.audioContext.createGain(); | ||
gain.connect(container.audioContext.destination); | ||
const audioContext = this._getAudioContext(), | ||
gain = audioContext.createGain(); | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = 0; | ||
const oscillator = container.audioContext.createOscillator(); | ||
const oscillator = audioContext.createOscillator(); | ||
oscillator.connect(gain); | ||
@@ -590,3 +618,4 @@ oscillator.type = "sine"; | ||
await ((0,engine_root_window_.isArray)(promises) ? Promise.allSettled(promises) : promises); | ||
let nextNoteIdx = noteIdx + 1; | ||
const indexOffset = 1; | ||
let nextNoteIdx = noteIdx + indexOffset; | ||
if (loop && nextNoteIdx >= notes.length) { | ||
@@ -619,3 +648,4 @@ nextNoteIdx = nextNoteIdx % notes.length; | ||
source.disconnect(); | ||
this._audioSources.splice(this._audioSources.indexOf(source), 1); | ||
const deleteCount = 1; | ||
this._audioSources.splice(this._audioSources.indexOf(source), deleteCount); | ||
}; | ||
@@ -629,8 +659,3 @@ this._unmute = () => { | ||
} | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
const { | ||
audioContext | ||
} = container; | ||
const audioContext = this._getAudioContext(); | ||
if (!this._audioSources) { | ||
@@ -641,3 +666,3 @@ this._audioSources = []; | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = soundsOptions.volume.value / 100; | ||
gain.gain.value = soundsOptions.volume.value / engine_root_window_.percentDenominator; | ||
this._gain = gain; | ||
@@ -651,3 +676,7 @@ this._initEvents(); | ||
const container = this._container, | ||
muteImg = this._muteImg, | ||
soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable || !soundsOptions.icons.enable) { | ||
return; | ||
} | ||
const muteImg = this._muteImg, | ||
unmuteImg = this._unmuteImg; | ||
@@ -662,8 +691,9 @@ if (muteImg) { | ||
this._updateMuteStatus = async () => { | ||
const container = this._container; | ||
const container = this._container, | ||
audioContext = this._getAudioContext(); | ||
if (container.muted) { | ||
await container.audioContext?.suspend(); | ||
this._mute(); | ||
await audioContext?.suspend(); | ||
await this._mute(); | ||
} else { | ||
await container.audioContext?.resume(); | ||
await audioContext?.resume(); | ||
this._unmute(); | ||
@@ -681,7 +711,7 @@ this._playMuteSound(); | ||
let stateChanged = false; | ||
if (this._volume <= 0 && !container.muted) { | ||
if (this._volume <= minVolume && !container.muted) { | ||
this._volume = 0; | ||
container.muted = true; | ||
stateChanged = true; | ||
} else if (this._volume > 0 && container.muted) { | ||
} else if (this._volume > minVolume && container.muted) { | ||
container.muted = false; | ||
@@ -695,3 +725,3 @@ stateChanged = true; | ||
if (this._gain?.gain) { | ||
this._gain.gain.value = this._volume / 100; | ||
this._gain.gain.value = this._volume / engine_root_window_.percentDenominator; | ||
} | ||
@@ -712,2 +742,16 @@ }; | ||
} | ||
if (soundsOptions.autoPlay && isWindowMuted()) { | ||
const firstClickHandler = () => { | ||
removeEventListener(engine_root_window_.mouseDownEvent, firstClickHandler); | ||
removeEventListener(engine_root_window_.touchStartEvent, firstClickHandler); | ||
unmuteWindow(); | ||
void this.unmute(); | ||
}; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true | ||
}; | ||
addEventListener(engine_root_window_.mouseDownEvent, firstClickHandler, listenerOptions); | ||
addEventListener(engine_root_window_.touchStartEvent, firstClickHandler, listenerOptions); | ||
} | ||
this._volume = soundsOptions.volume.value; | ||
@@ -720,3 +764,3 @@ const events = soundsOptions.events; | ||
} | ||
(0,engine_root_window_.executeOnSingleOrMultiple)(event.audio, async audio => { | ||
const promises = (0,engine_root_window_.executeOnSingleOrMultiple)(event.audio, async audio => { | ||
const response = await fetch(audio.source); | ||
@@ -726,9 +770,19 @@ if (!response.ok) { | ||
} | ||
const arrayBuffer = await response.arrayBuffer(); | ||
container.audioContext = new AudioContext(); | ||
const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer); | ||
const arrayBuffer = await response.arrayBuffer(), | ||
audioContext = this._getAudioContext(), | ||
audioBuffer = await audioContext.decodeAudioData(arrayBuffer); | ||
this._audioMap.set(audio.source, audioBuffer); | ||
}); | ||
if (promises instanceof Promise) { | ||
await promises; | ||
} else { | ||
await Promise.allSettled(promises); | ||
} | ||
} | ||
} | ||
async mute() { | ||
if (!this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async start() { | ||
@@ -753,8 +807,8 @@ const container = this._container, | ||
} = soundsOptions.icons, | ||
margin = 10; | ||
const toggleMute = async () => { | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
}; | ||
margin = 10, | ||
toggleMute = async () => { | ||
await this.toggleMute(); | ||
}, | ||
enableIcons = soundsOptions.icons.enable, | ||
display = enableIcons ? "block" : "none"; | ||
this._muteImg = initImage({ | ||
@@ -764,3 +818,3 @@ container, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: mute, | ||
@@ -785,3 +839,3 @@ margin, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeDown, | ||
@@ -791,7 +845,3 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeDown(); | ||
} | ||
@@ -803,3 +853,3 @@ }); | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeUp, | ||
@@ -809,18 +859,58 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeUp(); | ||
} | ||
}); | ||
if (!isWindowMuted() && soundsOptions.autoPlay) { | ||
await this.unmute(); | ||
} | ||
} | ||
stop() { | ||
this._container.muted = true; | ||
this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
void (async () => { | ||
await this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
})(); | ||
} | ||
async toggleMute() { | ||
const container = this._container; | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
} | ||
async unmute() { | ||
if (this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async volumeDown() { | ||
const container = this._container, | ||
soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
async volumeUp() { | ||
const container = this._container, | ||
soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
_getAudioContext() { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
return container.audioContext; | ||
} | ||
} | ||
@@ -830,2 +920,9 @@ ;// CONCATENATED MODULE: ./dist/browser/index.js | ||
const generalFirstClickHandler = () => { | ||
removeEventListener(engine_root_window_.mouseDownEvent, generalFirstClickHandler); | ||
removeEventListener(engine_root_window_.touchStartEvent, generalFirstClickHandler); | ||
unmuteWindow(); | ||
}; | ||
class SoundsPlugin { | ||
@@ -835,2 +932,8 @@ constructor(engine) { | ||
this._engine = engine; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true | ||
}; | ||
addEventListener(engine_root_window_.mouseDownEvent, generalFirstClickHandler, listenerOptions); | ||
addEventListener(engine_root_window_.touchStartEvent, generalFirstClickHandler, listenerOptions); | ||
} | ||
@@ -837,0 +940,0 @@ getPlugin(container) { |
/*! For license information please see tsparticles.plugin.sounds.min.js.LICENSE.txt */ | ||
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function s(t){var o=i[t];if(void 0!==o)return o.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,s),n.exports}s.d=(t,e)=>{for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{s.r(o),s.d(o,{loadSoundsPlugin:()=>g});var t=s(533);class e{constructor(){this.loop=!1,this.source=""}load(e){void 0!==e&&((0,t.isObject)(e)?(void 0!==e.loop&&(this.loop=e.loop),void 0!==e.source&&(this.source=e.source)):this.source=e)}}class i{constructor(){this.duration=500,this.value=[]}load(t){t&&(void 0!==t.duration&&(this.duration=t.duration),void 0!==t.value&&(this.value=t.value))}}class n{constructor(){this.loop=!1,this.melodies=[],this.notes=[]}load(t){void 0!==t&&(void 0!==t.loop&&(this.loop=t.loop),void 0!==t.melodies&&(this.melodies=t.melodies.map((t=>{const e=new n;return e.load(t),e}))),void 0!==t.notes&&(this.notes=t.notes.map((t=>{const e=new i;return e.load(t),e}))))}}class a{constructor(){this.event=[],this.notes=[]}load(s){s&&(void 0!==s.event&&(this.event=s.event),void 0!==s.audio&&((0,t.isArray)(s.audio)?this.audio=s.audio.map((t=>{const i=new e;return i.load(t),i})):(this.audio=new e,this.audio.load(s.audio))),void 0!==s.notes&&(this.notes=s.notes.map((t=>{const e=new i;return e.load(t),e}))),void 0!==s.melodies&&(this.melodies=s.melodies.map((t=>{const e=new n;return e.load(t),e}))),void 0!==s.filter&&((0,t.isString)(s.filter)?(0,t.isFunction)(window[s.filter])&&(this.filter=window[s.filter]):this.filter=s.filter))}}class c{constructor(){this.width=24,this.height=24}load(t){t&&(void 0!==t.path&&(this.path=t.path),void 0!==t.svg&&(this.svg=t.svg),void 0!==t.width&&(this.width=t.width),void 0!==t.height&&(this.height=t.height))}}class l{constructor(){this.mute=new c,this.unmute=new c,this.volumeDown=new c,this.volumeUp=new c,this.mute.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M19.707,5.293c-0.391-0.391-1.023-0.391-1.414,0l-1.551,1.551c-0.345-0.688-0.987-1.02-1.604-1.02c-0.449,0-0.905,0.152-1.356,0.453l-2.672,1.781C10.357,8.561,8.904,9,8,9c-1.654,0-3,1.346-3,3v2c0,1.237,0.754,2.302,1.826,2.76l-1.533,1.533c-0.391,0.391-0.391,1.023,0,1.414C5.488,19.902,5.744,20,6,20s0.512-0.098,0.707-0.293l2.527-2.527c0.697,0.174,1.416,0.455,1.875,0.762l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C16.035,20.176,17,19.495,17,18V9.414l2.707-2.707C20.098,6.316,20.098,5.684,19.707,5.293z M14.891,7.941c0.038-0.025,0.073-0.046,0.104-0.062C14.998,7.914,15,7.954,15,8v1.293l-2,2V9.202L14.891,7.941z M7,12c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146v2.439l-2.83,2.83C8.757,15.046,8.356,15,8,15c-0.552,0-1-0.448-1-1V12z M10.301,15.406L12,13.707v2.439C11.519,15.859,10.925,15.604,10.301,15.406z M14.994,18.12c-0.03-0.016-0.065-0.036-0.104-0.062L13,16.798v-4.091l2-2V18C15,18.046,14.998,18.086,14.994,18.12z"/>\n </g>\n</svg>',this.unmute.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M17.138,5.824c-0.449,0-0.905,0.152-1.356,0.453l-2.672,1.781C12.357,8.561,10.904,9,10,9c-1.654,0-3,1.346-3,3v2c0,1.654,1.346,3,3,3c0.904,0,2.357,0.439,3.109,0.941l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C18.035,20.176,19,19.495,19,18V8C19,6.505,18.035,5.824,17.138,5.824z M14,16.146C12.907,15.495,11.211,15,10,15c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146V16.146z M17,18c0,0.046-0.002,0.086-0.006,0.12c-0.03-0.016-0.065-0.036-0.104-0.062L15,16.798V9.202l1.891-1.261c0.038-0.025,0.073-0.046,0.104-0.062C16.998,7.914,17,7.954,17,8V18z"/>\n </g>\n</svg>',this.volumeDown.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M15.138,5.824c-0.449,0-0.905,0.152-1.356,0.453l-2.672,1.781C10.357,8.561,8.904,9,8,9c-1.654,0-3,1.346-3,3v2c0,1.654,1.346,3,3,3c0.904,0,2.357,0.439,3.109,0.941l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C16.035,20.176,17,19.495,17,18V8C17,6.505,16.035,5.824,15.138,5.824z M8,15c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146v6.293C10.907,15.495,9.211,15,8,15z M15,18c0,0.046-0.002,0.086-0.006,0.12c-0.03-0.016-0.065-0.036-0.104-0.062L13,16.798V9.202l1.891-1.261c0.038-0.025,0.073-0.046,0.104-0.062C14.998,7.914,15,7.954,15,8V18z"/>\n <path fill="#fff" d="M18.292,10.294c-0.39,0.391-0.39,1.023,0.002,1.414c0.345,0.345,0.535,0.803,0.535,1.291c0,0.489-0.19,0.948-0.536,1.294c-0.391,0.39-0.391,1.023,0,1.414C18.488,15.902,18.744,16,19,16s0.512-0.098,0.707-0.293c0.724-0.723,1.122-1.685,1.122-2.708s-0.398-1.984-1.123-2.707C19.317,9.903,18.683,9.901,18.292,10.294z"/>\n </g>\n</svg>',this.volumeUp.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M16.706,10.292c-0.389-0.389-1.023-0.391-1.414,0.002c-0.39,0.391-0.39,1.023,0.002,1.414c0.345,0.345,0.535,0.803,0.535,1.291c0,0.489-0.19,0.948-0.536,1.294c-0.391,0.39-0.391,1.023,0,1.414C15.488,15.902,15.744,16,16,16s0.512-0.098,0.707-0.293c0.724-0.723,1.122-1.685,1.122-2.708S17.431,11.015,16.706,10.292z"/>\n <path fill="#fff" d="M18.706,8.292c-0.391-0.389-1.023-0.39-1.414,0.002c-0.39,0.391-0.39,1.024,0.002,1.414c0.879,0.877,1.363,2.044,1.364,3.287c0.001,1.246-0.484,2.417-1.365,3.298c-0.391,0.391-0.391,1.023,0,1.414C17.488,17.902,17.744,18,18,18s0.512-0.098,0.707-0.293c1.259-1.259,1.952-2.933,1.951-4.713C20.657,11.217,19.964,9.547,18.706,8.292z"/>\n <path fill="#fff" d="M20.706,6.292c-0.391-0.389-1.023-0.39-1.414,0.002c-0.39,0.391-0.39,1.024,0.002,1.414c1.412,1.409,2.191,3.285,2.192,5.284c0.002,2.002-0.777,3.885-2.193,5.301c-0.391,0.391-0.391,1.023,0,1.414C19.488,19.902,19.744,20,20,20s0.512-0.098,0.707-0.293c1.794-1.794,2.781-4.18,2.779-6.717C23.485,10.457,22.497,8.078,20.706,6.292z"/>\n <path fill="#fff" d="M12.138,5.824c-0.449,0-0.905,0.152-1.356,0.453L8.109,8.059C7.357,8.561,5.904,9,5,9c-1.654,0-3,1.346-3,3v2c0,1.654,1.346,3,3,3c0.904,0,2.357,0.439,3.109,0.941l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C13.035,20.176,14,19.495,14,18V8C14,6.505,13.035,5.824,12.138,5.824z M5,15c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146v6.293C7.907,15.495,6.211,15,5,15z M12,18c0,0.046-0.002,0.086-0.006,0.12c-0.03-0.016-0.065-0.036-0.104-0.062L10,16.798V9.202l1.891-1.261c0.038-0.025,0.073-0.046,0.104-0.062C11.998,7.914,12,7.954,12,8V18z"/>\n </g>\n</svg>'}load(t){t&&(this.mute.load(t.mute),this.unmute.load(t.unmute),this.volumeDown.load(t.volumeDown),this.volumeUp.load(t.volumeUp))}}class u{constructor(){this.value=100,this.max=100,this.min=0,this.step=10}load(e){void 0!==e&&((0,t.isObject)(e)?(void 0!==e.max&&(this.max=e.max),void 0!==e.min&&(this.min=e.min),void 0!==e.step&&(this.step=e.step),void 0!==e.value&&(this.value=e.value)):this.value=e)}}class r{constructor(){this.enable=!1,this.events=[],this.icons=new l,this.volume=new u}load(t){t&&(void 0!==t.enable&&(this.enable=t.enable),void 0!==t.events&&(this.events=t.events.map((t=>{const e=new a;return e.load(t),e}))),this.icons.load(t.icons),void 0!==t.volume&&this.volume.load(t.volume))}}const d=new Map;function h(t){const e=/(([A-G]b?)(\d))|pause/i.exec(t);if(!e||!e.length)return;const i=e[2]||e[0],s=d.get(i);return s?s[parseInt(e[3]||"0")]:void 0}function p(t){const e=document.createElement("img"),{clickCb:i,container:s,display:o,iconOptions:n,margin:a,options:c,pos:l,rightOffsets:u}=t,{width:r,path:d,svg:h}=n;!function(t,e,i,s,o,n,a){t.style.userSelect="none",t.style.webkitUserSelect="none",t.style.position="absolute",t.style.top=`${e+a}px`,t.style.left=i-a-n+"px",t.style.display=s,t.style.zIndex=`${o+1}`}(e,l.top+a,l.right-(a*(u.length+1)+r+u.reduce(((t,e)=>t+e),0)),o,c.fullScreen.zIndex+1,r,a),e.src=d??(h?`data:image/svg+xml;base64,${btoa(h)}`:"");return(s.canvas.element?.parentNode||document.body).append(e),e.addEventListener("click",i),e}function m(t){t&&t.remove()}d.set("C",[16.35,32.7,65.41,130.81,261.63,523.25,1046.5,2093,4186.01]),d.set("Db",[17.32,34.65,69.3,138.59,277.18,554.37,1108.73,2217.46,4434.92]),d.set("D",[18.35,36.71,73.42,146.83,293.66,587.33,1174.66,2349.32,4698.63]),d.set("Eb",[19.45,38.89,77.78,155.56,311.13,622.25,1244.51,2489.02,4978.03]),d.set("E",[20.6,41.2,82.41,164.81,329.63,659.25,1318.51,2637.02,5274.04]),d.set("F",[21.83,43.65,87.31,174.61,349.23,698.46,1396.91,2793.83,5587.65]),d.set("Gb",[23.12,46.25,92.5,185,369.99,739.99,1479.98,2959.96,5919.91]),d.set("G",[24.5,49,98,196,392,783.99,1567.98,3135.96,6271.93]),d.set("Ab",[25.96,51.91,103.83,207.65,415.3,830.61,1661.22,3322.44,6644.88]),d.set("A",[27.5,55,110,220,440,880,1760,3520,7040]),d.set("Bb",[29.14,58.27,116.54,233.08,466.16,932.33,1864.66,3729.31,7458.62]),d.set("B",[30.87,61.74,123.47,246.94,493.88,987.77,1975.53,3951.07,7902.13]),d.set("pause",[0]);class v{constructor(e,i){this._addBuffer=t=>{const e=t.createBufferSource();return this._audioSources.push(e),e},this._addOscillator=t=>{const e=t.createOscillator();return this._audioSources.push(e),e},this._initEvents=()=>{const e=this._container,i=e.actualOptions.sounds;if(i?.enable&&e.canvas.element)for(const e of i.events){const i=s=>{(async()=>{const o=e.filter&&!e.filter(s);if(this._container===s.container)if(!this._container||this._container.muted||this._container.destroyed)(0,t.executeOnSingleOrMultiple)(e.event,(t=>{this._engine.removeEventListener(t,i)}));else if(!o)if(e.audio)this._playBuffer((0,t.itemFromSingleOrMultiple)(e.audio));else if(e.melodies){const i=(0,t.itemFromArray)(e.melodies);i.melodies.length?await Promise.allSettled(i.melodies.map((t=>this._playNote(t.notes,0,i.loop)))):await this._playNote(i.notes,0,i.loop)}else if(e.notes){const i=(0,t.itemFromArray)(e.notes);await this._playNote([i],0,!1)}})()};(0,t.executeOnSingleOrMultiple)(e.event,(t=>{this._engine.addEventListener(t,i)}))}},this._mute=()=>{const t=this._container;if(t.audioContext){for(const t of this._audioSources)this._removeAudioSource(t);this._gain&&this._gain.disconnect(),t.audioContext.close(),t.audioContext=void 0,this._engine.dispatchEvent("soundsMuted",{container:this._container})}},this._playBuffer=t=>{const e=this._audioMap.get(t.source);if(!e)return;const i=this._container.audioContext;if(!i)return;const s=this._addBuffer(i);s.loop=t.loop,s.buffer=e,s.connect(this._gain??i.destination),s.start()},this._playFrequency=async(t,e)=>{if(!this._container.audioContext||!this._gain)return;const i=this._addOscillator(this._container.audioContext);return i.connect(this._gain),i.type="sine",i.frequency.value=t,i.start(),new Promise((t=>{setTimeout((()=>{this._removeAudioSource(i),t()}),e)}))},this._playMuteSound=()=>{const t=this._container;if(!t.audioContext)return;const e=t.audioContext.createGain();e.connect(t.audioContext.destination),e.gain.value=0;const i=t.audioContext.createOscillator();i.connect(e),i.type="sine",i.frequency.value=1,i.start(),setTimeout((()=>{i.stop(),i.disconnect(),e.disconnect()}))},this._playNote=async(e,i,s)=>{if(this._container.muted)return;const o=e[i];if(!o)return;const n=o.value,a=(0,t.executeOnSingleOrMultiple)(n,(async(t,s)=>this._playNoteValue(e,i,s)));await((0,t.isArray)(a)?Promise.allSettled(a):a);let c=i+1;s&&c>=e.length&&(c%=e.length),this._container.muted||await this._playNote(e,c,s)},this._playNoteValue=async(e,i,s)=>{const o=e[i];if(!o)return;const n=(0,t.itemFromSingleOrMultiple)(o.value,s,!0);try{const e=h(n);if(!(0,t.isNumber)(e))return;await this._playFrequency(e,o.duration)}catch(e){(0,t.getLogger)().error(e)}},this._removeAudioSource=t=>{t.stop(),t.disconnect(),this._audioSources.splice(this._audioSources.indexOf(t),1)},this._unmute=()=>{const t=this._container,e=t.actualOptions.sounds;if(!e)return;t.audioContext||(t.audioContext=new AudioContext);const{audioContext:i}=t;this._audioSources||(this._audioSources=[]);const s=i.createGain();s.connect(i.destination),s.gain.value=e.volume.value/100,this._gain=s,this._initEvents(),this._engine.dispatchEvent("soundsUnmuted",{container:this._container})},this._updateMuteIcons=()=>{const t=this._container,e=this._muteImg,i=this._unmuteImg;e&&(e.style.display=t.muted?"block":"none"),i&&(i.style.display=t.muted?"none":"block")},this._updateMuteStatus=async()=>{const t=this._container;t.muted?(await(t.audioContext?.suspend()),this._mute()):(await(t.audioContext?.resume()),this._unmute(),this._playMuteSound())},this._updateVolume=async()=>{const e=this._container,i=e.actualOptions.sounds;if(!i?.enable)return;(0,t.clamp)(this._volume,i.volume.min,i.volume.max);let s=!1;this._volume<=0&&!e.muted?(this._volume=0,e.muted=!0,s=!0):this._volume>0&&e.muted&&(e.muted=!1,s=!0),s&&(this._updateMuteIcons(),await this._updateMuteStatus()),this._gain?.gain&&(this._gain.gain.value=this._volume/100)},this._container=e,this._engine=i,this._volume=0,this._audioSources=[],this._audioMap=new Map}async init(){const e=this._container,i=e.actualOptions.sounds;if(!i?.enable)return;this._volume=i.volume.value;const s=i.events;this._audioMap=new Map;for(const i of s)i.audio&&(0,t.executeOnSingleOrMultiple)(i.audio,(async t=>{const i=await fetch(t.source);if(!i.ok)return;const s=await i.arrayBuffer();e.audioContext=new AudioContext;const o=await e.audioContext.decodeAudioData(s);this._audioMap.set(t.source,o)}))}async start(){const t=this._container,e=t.actualOptions,i=e.sounds;if(!i?.enable||!t.canvas.element)return;t.muted=!0;const s=t.canvas.element,o={top:s.offsetTop,right:s.offsetLeft+s.offsetWidth},{mute:n,unmute:a,volumeDown:c,volumeUp:l}=i.icons,u=async()=>{t.muted=!t.muted,this._updateMuteIcons(),await this._updateMuteStatus()};this._muteImg=p({container:t,options:e,pos:o,display:"block",iconOptions:n,margin:10,rightOffsets:[c.width,l.width],clickCb:u}),this._unmuteImg=p({container:t,options:e,pos:o,display:"none",iconOptions:a,margin:10,rightOffsets:[c.width,l.width],clickCb:u}),this._volumeDownImg=p({container:t,options:e,pos:o,display:"block",iconOptions:c,margin:10,rightOffsets:[l.width],clickCb:async()=>{t.muted&&(this._volume=0),this._volume-=i.volume.step,await this._updateVolume()}}),this._volumeUpImg=p({container:t,options:e,pos:o,display:"block",iconOptions:l,margin:10,rightOffsets:[],clickCb:async()=>{t.muted&&(this._volume=0),this._volume+=i.volume.step,await this._updateVolume()}})}stop(){this._container.muted=!0,this._mute(),m(this._muteImg),m(this._unmuteImg),m(this._volumeDownImg),m(this._volumeUpImg)}}class f{constructor(t){this.id="sounds",this._engine=t}getPlugin(t){return new v(t,this._engine)}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.sounds;void 0===i?.load&&(t.sounds=i=new r),i.load(e?.sounds)}needsPlugin(t){return t?.sounds?.enable??!1}}async function g(t,e=!0){await t.addPlugin(new f(t),e)}})(),o})())); | ||
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function n(t){var s=i[t];if(void 0!==s)return s.exports;var o=i[t]={exports:{}};return e[t](o,o.exports,n),o.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var s={};return(()=>{n.r(s),n.d(s,{loadSoundsPlugin:()=>b});var t=n(533);class e{constructor(){this.loop=!1,this.source=""}load(e){void 0!==e&&((0,t.isObject)(e)?(void 0!==e.loop&&(this.loop=e.loop),void 0!==e.source&&(this.source=e.source)):this.source=e)}}class i{constructor(){this.duration=500,this.value=[]}load(t){t&&(void 0!==t.duration&&(this.duration=t.duration),void 0!==t.value&&(this.value=t.value))}}class o{constructor(){this.loop=!1,this.melodies=[],this.notes=[]}load(t){void 0!==t&&(void 0!==t.loop&&(this.loop=t.loop),void 0!==t.melodies&&(this.melodies=t.melodies.map((t=>{const e=new o;return e.load(t),e}))),void 0!==t.notes&&(this.notes=t.notes.map((t=>{const e=new i;return e.load(t),e}))))}}class a{constructor(){this.event=[],this.notes=[]}load(n){if(n&&(void 0!==n.event&&(this.event=n.event),void 0!==n.audio&&((0,t.isArray)(n.audio)?this.audio=n.audio.map((t=>{const i=new e;return i.load(t),i})):(this.audio=new e,this.audio.load(n.audio))),void 0!==n.notes&&(this.notes=n.notes.map((t=>{const e=new i;return e.load(t),e}))),void 0!==n.melodies&&(this.melodies=n.melodies.map((t=>{const e=new o;return e.load(t),e}))),n.filter))if((0,t.isString)(n.filter)){const e=window[n.filter];(0,t.isFunction)(e)&&(this.filter=e)}else this.filter=n.filter}}class c{constructor(){this.width=24,this.height=24,this.style=""}load(t){t&&(void 0!==t.path&&(this.path=t.path),void 0!==t.svg&&(this.svg=t.svg),void 0!==t.width&&(this.width=t.width),void 0!==t.height&&(this.height=t.height))}}class u{constructor(){this.mute=new c,this.unmute=new c,this.volumeDown=new c,this.volumeUp=new c,this.enable=!1,this.mute.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M19.707,5.293c-0.391-0.391-1.023-0.391-1.414,0l-1.551,1.551c-0.345-0.688-0.987-1.02-1.604-1.02c-0.449,0-0.905,0.152-1.356,0.453l-2.672,1.781C10.357,8.561,8.904,9,8,9c-1.654,0-3,1.346-3,3v2c0,1.237,0.754,2.302,1.826,2.76l-1.533,1.533c-0.391,0.391-0.391,1.023,0,1.414C5.488,19.902,5.744,20,6,20s0.512-0.098,0.707-0.293l2.527-2.527c0.697,0.174,1.416,0.455,1.875,0.762l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C16.035,20.176,17,19.495,17,18V9.414l2.707-2.707C20.098,6.316,20.098,5.684,19.707,5.293z M14.891,7.941c0.038-0.025,0.073-0.046,0.104-0.062C14.998,7.914,15,7.954,15,8v1.293l-2,2V9.202L14.891,7.941z M7,12c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146v2.439l-2.83,2.83C8.757,15.046,8.356,15,8,15c-0.552,0-1-0.448-1-1V12z M10.301,15.406L12,13.707v2.439C11.519,15.859,10.925,15.604,10.301,15.406z M14.994,18.12c-0.03-0.016-0.065-0.036-0.104-0.062L13,16.798v-4.091l2-2V18C15,18.046,14.998,18.086,14.994,18.12z"/>\n </g>\n</svg>',this.unmute.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M17.138,5.824c-0.449,0-0.905,0.152-1.356,0.453l-2.672,1.781C12.357,8.561,10.904,9,10,9c-1.654,0-3,1.346-3,3v2c0,1.654,1.346,3,3,3c0.904,0,2.357,0.439,3.109,0.941l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C18.035,20.176,19,19.495,19,18V8C19,6.505,18.035,5.824,17.138,5.824z M14,16.146C12.907,15.495,11.211,15,10,15c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146V16.146z M17,18c0,0.046-0.002,0.086-0.006,0.12c-0.03-0.016-0.065-0.036-0.104-0.062L15,16.798V9.202l1.891-1.261c0.038-0.025,0.073-0.046,0.104-0.062C16.998,7.914,17,7.954,17,8V18z"/>\n </g>\n</svg>',this.volumeDown.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M15.138,5.824c-0.449,0-0.905,0.152-1.356,0.453l-2.672,1.781C10.357,8.561,8.904,9,8,9c-1.654,0-3,1.346-3,3v2c0,1.654,1.346,3,3,3c0.904,0,2.357,0.439,3.109,0.941l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C16.035,20.176,17,19.495,17,18V8C17,6.505,16.035,5.824,15.138,5.824z M8,15c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146v6.293C10.907,15.495,9.211,15,8,15z M15,18c0,0.046-0.002,0.086-0.006,0.12c-0.03-0.016-0.065-0.036-0.104-0.062L13,16.798V9.202l1.891-1.261c0.038-0.025,0.073-0.046,0.104-0.062C14.998,7.914,15,7.954,15,8V18z"/>\n <path fill="#fff" d="M18.292,10.294c-0.39,0.391-0.39,1.023,0.002,1.414c0.345,0.345,0.535,0.803,0.535,1.291c0,0.489-0.19,0.948-0.536,1.294c-0.391,0.39-0.391,1.023,0,1.414C18.488,15.902,18.744,16,19,16s0.512-0.098,0.707-0.293c0.724-0.723,1.122-1.685,1.122-2.708s-0.398-1.984-1.123-2.707C19.317,9.903,18.683,9.901,18.292,10.294z"/>\n </g>\n</svg>',this.volumeUp.svg='<?xml version="1.0"?>\n<svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"\n xml:space="preserve" xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink">\n <g id="Layer_1">\n <path fill="#fff" d="M16.706,10.292c-0.389-0.389-1.023-0.391-1.414,0.002c-0.39,0.391-0.39,1.023,0.002,1.414c0.345,0.345,0.535,0.803,0.535,1.291c0,0.489-0.19,0.948-0.536,1.294c-0.391,0.39-0.391,1.023,0,1.414C15.488,15.902,15.744,16,16,16s0.512-0.098,0.707-0.293c0.724-0.723,1.122-1.685,1.122-2.708S17.431,11.015,16.706,10.292z"/>\n <path fill="#fff" d="M18.706,8.292c-0.391-0.389-1.023-0.39-1.414,0.002c-0.39,0.391-0.39,1.024,0.002,1.414c0.879,0.877,1.363,2.044,1.364,3.287c0.001,1.246-0.484,2.417-1.365,3.298c-0.391,0.391-0.391,1.023,0,1.414C17.488,17.902,17.744,18,18,18s0.512-0.098,0.707-0.293c1.259-1.259,1.952-2.933,1.951-4.713C20.657,11.217,19.964,9.547,18.706,8.292z"/>\n <path fill="#fff" d="M20.706,6.292c-0.391-0.389-1.023-0.39-1.414,0.002c-0.39,0.391-0.39,1.024,0.002,1.414c1.412,1.409,2.191,3.285,2.192,5.284c0.002,2.002-0.777,3.885-2.193,5.301c-0.391,0.391-0.391,1.023,0,1.414C19.488,19.902,19.744,20,20,20s0.512-0.098,0.707-0.293c1.794-1.794,2.781-4.18,2.779-6.717C23.485,10.457,22.497,8.078,20.706,6.292z"/>\n <path fill="#fff" d="M12.138,5.824c-0.449,0-0.905,0.152-1.356,0.453L8.109,8.059C7.357,8.561,5.904,9,5,9c-1.654,0-3,1.346-3,3v2c0,1.654,1.346,3,3,3c0.904,0,2.357,0.439,3.109,0.941l2.672,1.781c0.451,0.301,0.907,0.453,1.356,0.453C13.035,20.176,14,19.495,14,18V8C14,6.505,13.035,5.824,12.138,5.824z M5,15c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1c1.211,0,2.907-0.495,4-1.146v6.293C7.907,15.495,6.211,15,5,15z M12,18c0,0.046-0.002,0.086-0.006,0.12c-0.03-0.016-0.065-0.036-0.104-0.062L10,16.798V9.202l1.891-1.261c0.038-0.025,0.073-0.046,0.104-0.062C11.998,7.914,12,7.954,12,8V18z"/>\n </g>\n</svg>'}load(t){t&&(void 0!==t.enable&&(this.enable=t.enable),this.mute.load(t.mute),this.unmute.load(t.unmute),this.volumeDown.load(t.volumeDown),this.volumeUp.load(t.volumeUp))}}class l{constructor(){this.value=100,this.max=100,this.min=0,this.step=10}load(e){void 0!==e&&((0,t.isObject)(e)?(void 0!==e.max&&(this.max=e.max),void 0!==e.min&&(this.min=e.min),void 0!==e.step&&(this.step=e.step),void 0!==e.value&&(this.value=e.value)):this.value=e)}}class r{constructor(){this.autoPlay=!0,this.enable=!1,this.events=[],this.icons=new u,this.volume=new l}load(t){t&&(void 0!==t.autoPlay&&(this.autoPlay=t.autoPlay),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.events&&(this.events=t.events.map((t=>{const e=new a;return e.load(t),e}))),this.icons.load(t.icons),void 0!==t.volume&&this.volume.load(t.volume))}}const d=new Map;function h(t){const e=/(([A-G]b?)(\d))|pause/i.exec(t);if(!e?.length)return;const i=e[2]||e[0],n=d.get(i);return n?n[parseInt(e[3]||"0")]:void 0}d.set("C",[16.35,32.7,65.41,130.81,261.63,523.25,1046.5,2093,4186.01]),d.set("Db",[17.32,34.65,69.3,138.59,277.18,554.37,1108.73,2217.46,4434.92]),d.set("D",[18.35,36.71,73.42,146.83,293.66,587.33,1174.66,2349.32,4698.63]),d.set("Eb",[19.45,38.89,77.78,155.56,311.13,622.25,1244.51,2489.02,4978.03]),d.set("E",[20.6,41.2,82.41,164.81,329.63,659.25,1318.51,2637.02,5274.04]),d.set("F",[21.83,43.65,87.31,174.61,349.23,698.46,1396.91,2793.83,5587.65]),d.set("Gb",[23.12,46.25,92.5,185,369.99,739.99,1479.98,2959.96,5919.91]),d.set("G",[24.5,49,98,196,392,783.99,1567.98,3135.96,6271.93]),d.set("Ab",[25.96,51.91,103.83,207.65,415.3,830.61,1661.22,3322.44,6644.88]),d.set("A",[27.5,55,110,220,440,880,1760,3520,7040]),d.set("Bb",[29.14,58.27,116.54,233.08,466.16,932.33,1864.66,3729.31,7458.62]),d.set("B",[30.87,61.74,123.47,246.94,493.88,987.77,1975.53,3951.07,7902.13]),d.set("pause",[0]);let v=!0;const m=()=>v,p=()=>{v=!1},f=1;function g(t){const e=document.createElement("img"),{clickCb:i,container:n,display:s,iconOptions:o,margin:a,options:c,pos:u,rightOffsets:l}=t,{width:r,path:d,style:h,svg:v}=o;!function(t,e,i,n,s,o,a,c){t.style.userSelect="none",t.style.webkitUserSelect="none",t.style.position="absolute",t.style.top=`${e+a}px`,t.style.left=i-a-o+"px",t.style.display=n,t.style.zIndex=`${s+f}`,t.style.cssText+=c}(e,u.top+a,u.right-(a*(l.length+1)+r+l.reduce(((t,e)=>t+e),0)),s,c.fullScreen.zIndex+f,r,a,h),e.src=d??(v?`data:image/svg+xml;base64,${btoa(v)}`:"");return(n.canvas.element?.parentNode??document.body).append(e),e.addEventListener("click",(()=>{i()})),e}function _(t){t&&t.remove()}class w{constructor(e,i){this._addBuffer=t=>{const e=t.createBufferSource();return this._audioSources.push(e),e},this._addOscillator=t=>{const e=t.createOscillator();return this._audioSources.push(e),e},this._initEvents=()=>{const e=this._container,i=e.actualOptions.sounds;if(i?.enable&&e.canvas.element)for(const e of i.events){const i=n=>{(async()=>{const s=e.filter&&!e.filter(n);if(this._container!==n.container)return;if(!this._container||this._container.muted||this._container.destroyed)return void(0,t.executeOnSingleOrMultiple)(e.event,(t=>{this._engine.removeEventListener(t,i)}));if(s)return;if(e.audio)this._playBuffer((0,t.itemFromSingleOrMultiple)(e.audio));else if(e.melodies){const i=(0,t.itemFromArray)(e.melodies);i.melodies.length?await Promise.allSettled(i.melodies.map((t=>this._playNote(t.notes,0,i.loop)))):await this._playNote(i.notes,0,i.loop)}else if(e.notes){const i=(0,t.itemFromArray)(e.notes);await this._playNote([i],0,!1)}})()};(0,t.executeOnSingleOrMultiple)(e.event,(t=>{this._engine.addEventListener(t,i)}))}},this._mute=async()=>{const t=this._container,e=this._getAudioContext();for(const t of this._audioSources)this._removeAudioSource(t);this._gain&&this._gain.disconnect(),await e.close(),t.audioContext=void 0,this._engine.dispatchEvent("soundsMuted",{container:this._container})},this._playBuffer=t=>{const e=this._audioMap.get(t.source);if(!e)return;const i=this._container.audioContext;if(!i)return;const n=this._addBuffer(i);n.loop=t.loop,n.buffer=e,n.connect(this._gain??i.destination),n.start()},this._playFrequency=async(t,e)=>{if(!this._gain||this._container.muted)return;const i=this._getAudioContext(),n=this._addOscillator(i);return n.connect(this._gain),n.type="sine",n.frequency.value=t,n.start(),new Promise((t=>{setTimeout((()=>{this._removeAudioSource(n),t()}),e)}))},this._playMuteSound=()=>{if(this._container.muted)return;const t=this._getAudioContext(),e=t.createGain();e.connect(t.destination),e.gain.value=0;const i=t.createOscillator();i.connect(e),i.type="sine",i.frequency.value=1,i.start(),setTimeout((()=>{i.stop(),i.disconnect(),e.disconnect()}))},this._playNote=async(e,i,n)=>{if(this._container.muted)return;const s=e[i];if(!s)return;const o=s.value,a=(0,t.executeOnSingleOrMultiple)(o,(async(t,n)=>this._playNoteValue(e,i,n)));await((0,t.isArray)(a)?Promise.allSettled(a):a);let c=i+1;n&&c>=e.length&&(c%=e.length),this._container.muted||await this._playNote(e,c,n)},this._playNoteValue=async(e,i,n)=>{const s=e[i];if(!s)return;const o=(0,t.itemFromSingleOrMultiple)(s.value,n,!0);try{const e=h(o);if(!(0,t.isNumber)(e))return;await this._playFrequency(e,s.duration)}catch(e){(0,t.getLogger)().error(e)}},this._removeAudioSource=t=>{t.stop(),t.disconnect();this._audioSources.splice(this._audioSources.indexOf(t),1)},this._unmute=()=>{const e=this._container.actualOptions.sounds;if(!e)return;const i=this._getAudioContext();this._audioSources||(this._audioSources=[]);const n=i.createGain();n.connect(i.destination),n.gain.value=e.volume.value/t.percentDenominator,this._gain=n,this._initEvents(),this._engine.dispatchEvent("soundsUnmuted",{container:this._container})},this._updateMuteIcons=()=>{const t=this._container,e=t.actualOptions.sounds;if(!e?.enable||!e.icons.enable)return;const i=this._muteImg,n=this._unmuteImg;i&&(i.style.display=t.muted?"block":"none"),n&&(n.style.display=t.muted?"none":"block")},this._updateMuteStatus=async()=>{const t=this._container,e=this._getAudioContext();t.muted?(await(e?.suspend()),await this._mute()):(await(e?.resume()),this._unmute(),this._playMuteSound())},this._updateVolume=async()=>{const e=this._container,i=e.actualOptions.sounds;if(!i?.enable)return;(0,t.clamp)(this._volume,i.volume.min,i.volume.max);let n=!1;this._volume<=0&&!e.muted?(this._volume=0,e.muted=!0,n=!0):this._volume>0&&e.muted&&(e.muted=!1,n=!0),n&&(this._updateMuteIcons(),await this._updateMuteStatus()),this._gain?.gain&&(this._gain.gain.value=this._volume/t.percentDenominator)},this._container=e,this._engine=i,this._volume=0,this._audioSources=[],this._audioMap=new Map}async init(){const e=this._container.actualOptions.sounds;if(!e?.enable)return;if(e.autoPlay&&m()){const e=()=>{removeEventListener(t.mouseDownEvent,e),removeEventListener(t.touchStartEvent,e),p(),this.unmute()},i={capture:!0,once:!0};addEventListener(t.mouseDownEvent,e,i),addEventListener(t.touchStartEvent,e,i)}this._volume=e.volume.value;const i=e.events;this._audioMap=new Map;for(const e of i){if(!e.audio)continue;const i=(0,t.executeOnSingleOrMultiple)(e.audio,(async t=>{const e=await fetch(t.source);if(!e.ok)return;const i=await e.arrayBuffer(),n=this._getAudioContext(),s=await n.decodeAudioData(i);this._audioMap.set(t.source,s)}));i instanceof Promise?await i:await Promise.allSettled(i)}}async mute(){this._container.muted||await this.toggleMute()}async start(){const t=this._container,e=t.actualOptions,i=e.sounds;if(!i?.enable||!t.canvas.element)return;t.muted=!0;const n=t.canvas.element,s={top:n.offsetTop,right:n.offsetLeft+n.offsetWidth},{mute:o,unmute:a,volumeDown:c,volumeUp:u}=i.icons,l=async()=>{await this.toggleMute()},r=i.icons.enable?"block":"none";this._muteImg=g({container:t,options:e,pos:s,display:r,iconOptions:o,margin:10,rightOffsets:[c.width,u.width],clickCb:l}),this._unmuteImg=g({container:t,options:e,pos:s,display:"none",iconOptions:a,margin:10,rightOffsets:[c.width,u.width],clickCb:l}),this._volumeDownImg=g({container:t,options:e,pos:s,display:r,iconOptions:c,margin:10,rightOffsets:[u.width],clickCb:async()=>{await this.volumeDown()}}),this._volumeUpImg=g({container:t,options:e,pos:s,display:r,iconOptions:u,margin:10,rightOffsets:[],clickCb:async()=>{await this.volumeUp()}}),!m()&&i.autoPlay&&await this.unmute()}stop(){this._container.muted=!0,(async()=>{await this._mute(),_(this._muteImg),_(this._unmuteImg),_(this._volumeDownImg),_(this._volumeUpImg)})()}async toggleMute(){const t=this._container;t.muted=!t.muted,this._updateMuteIcons(),await this._updateMuteStatus()}async unmute(){this._container.muted&&await this.toggleMute()}async volumeDown(){const t=this._container,e=t.actualOptions.sounds;e?.enable&&(t.muted&&(this._volume=0),this._volume-=e.volume.step,await this._updateVolume())}async volumeUp(){const t=this._container.actualOptions.sounds;t?.enable&&(this._volume+=t.volume.step,await this._updateVolume())}_getAudioContext(){const t=this._container;return t.audioContext||(t.audioContext=new AudioContext),t.audioContext}}const y=()=>{removeEventListener(t.mouseDownEvent,y),removeEventListener(t.touchStartEvent,y),p()};class x{constructor(e){this.id="sounds",this._engine=e;const i={capture:!0,once:!0};addEventListener(t.mouseDownEvent,y,i),addEventListener(t.touchStartEvent,y,i)}getPlugin(t){return new w(t,this._engine)}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.sounds;void 0===i?.load&&(t.sounds=i=new r),i.load(e?.sounds)}needsPlugin(t){return t?.sounds?.enable??!1}}async function b(t,e=!0){await t.addPlugin(new x(t),e)}})(),s})())); |
@@ -1,1 +0,1 @@ | ||
/*! tsParticles Sounds Plugin v3.0.3 by Matteo Bruni */ | ||
/*! tsParticles Sounds Plugin v3.1.0 by Matteo Bruni */ |
@@ -1,2 +0,2 @@ | ||
import type { Engine } from "@tsparticles/engine"; | ||
import { type Engine } from "@tsparticles/engine"; | ||
export declare function loadSoundsPlugin(engine: Engine, refresh?: boolean): Promise<void>; |
@@ -7,2 +7,3 @@ import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine"; | ||
export declare class Sounds implements ISounds, IOptionLoader<ISounds> { | ||
autoPlay: boolean; | ||
enable: boolean; | ||
@@ -9,0 +10,0 @@ events: SoundsEvent[]; |
@@ -7,7 +7,2 @@ import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine"; | ||
import { SoundsNote } from "./SoundsNote.js"; | ||
declare global { | ||
interface Window { | ||
[key: string]: unknown; | ||
} | ||
} | ||
export declare class SoundsEvent implements ISoundsEvent, IOptionLoader<ISoundsEvent> { | ||
@@ -14,0 +9,0 @@ audio?: SingleOrMultiple<SoundsAudio>; |
@@ -6,2 +6,3 @@ import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine"; | ||
path?: string; | ||
style: string; | ||
svg?: string; | ||
@@ -8,0 +9,0 @@ width: number; |
@@ -5,2 +5,3 @@ import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine"; | ||
export declare class SoundsIcons implements ISoundsIcons, IOptionLoader<ISoundsIcons> { | ||
enable: boolean; | ||
mute: SoundsIcon; | ||
@@ -7,0 +8,0 @@ unmute: SoundsIcon; |
@@ -5,2 +5,3 @@ import type { ISoundsEvent } from "./ISoundsEvent.js"; | ||
export interface ISounds { | ||
autoPlay: boolean; | ||
enable: boolean; | ||
@@ -7,0 +8,0 @@ events: ISoundsEvent[]; |
export interface ISoundsIcon { | ||
height: number; | ||
path?: string; | ||
style: string; | ||
svg?: string; | ||
width: number; | ||
} |
import type { ISoundsIcon } from "./ISoundsIcon.js"; | ||
export interface ISoundsIcons { | ||
enable: boolean; | ||
mute: ISoundsIcon; | ||
@@ -4,0 +5,0 @@ unmute: ISoundsIcon; |
@@ -16,6 +16,12 @@ import { type Engine, type IContainerPlugin } from "@tsparticles/engine"; | ||
init(): Promise<void>; | ||
mute(): Promise<void>; | ||
start(): Promise<void>; | ||
stop(): void; | ||
toggleMute(): Promise<void>; | ||
unmute(): Promise<void>; | ||
volumeDown(): Promise<void>; | ||
volumeUp(): Promise<void>; | ||
private readonly _addBuffer; | ||
private readonly _addOscillator; | ||
private _getAudioContext; | ||
private readonly _initEvents; | ||
@@ -22,0 +28,0 @@ private readonly _mute; |
@@ -18,8 +18,8 @@ import type { Container, CustomEventArgs, IOptions, Options } from "@tsparticles/engine"; | ||
}; | ||
export type ImageMargins = { | ||
export interface ImageMargins { | ||
right: number; | ||
top: number; | ||
}; | ||
export type InitImageData = { | ||
clickCb: () => void; | ||
} | ||
export interface InitImageData { | ||
clickCb: () => Promise<void>; | ||
container: SoundsContainer; | ||
@@ -32,2 +32,2 @@ display: ImageDisplay; | ||
rightOffsets: number[]; | ||
}; | ||
} |
export declare function getNoteFrequency(note: string): number | undefined; | ||
export declare const isWindowMuted: () => boolean; | ||
export declare const unmuteWindow: () => void; |
@@ -7,3 +7,3 @@ (function (factory) { | ||
else if (typeof define === "function" && define.amd) { | ||
define(["require", "exports", "./Options/Classes/Sounds.js", "./SoundsInstance.js"], factory); | ||
define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Sounds.js", "./SoundsInstance.js", "./utils.js"], factory); | ||
} | ||
@@ -14,4 +14,11 @@ })(function (require, exports) { | ||
exports.loadSoundsPlugin = void 0; | ||
const engine_1 = require("@tsparticles/engine"); | ||
const Sounds_js_1 = require("./Options/Classes/Sounds.js"); | ||
const SoundsInstance_js_1 = require("./SoundsInstance.js"); | ||
const utils_js_1 = require("./utils.js"); | ||
const generalFirstClickHandler = () => { | ||
removeEventListener(engine_1.mouseDownEvent, generalFirstClickHandler); | ||
removeEventListener(engine_1.touchStartEvent, generalFirstClickHandler); | ||
(0, utils_js_1.unmuteWindow)(); | ||
}; | ||
class SoundsPlugin { | ||
@@ -21,2 +28,8 @@ constructor(engine) { | ||
this._engine = engine; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(engine_1.mouseDownEvent, generalFirstClickHandler, listenerOptions); | ||
addEventListener(engine_1.touchStartEvent, generalFirstClickHandler, listenerOptions); | ||
} | ||
@@ -23,0 +36,0 @@ getPlugin(container) { |
@@ -18,2 +18,3 @@ (function (factory) { | ||
constructor() { | ||
this.autoPlay = true; | ||
this.enable = false; | ||
@@ -28,2 +29,5 @@ this.events = []; | ||
} | ||
if (data.autoPlay !== undefined) { | ||
this.autoPlay = data.autoPlay; | ||
} | ||
if (data.enable !== undefined) { | ||
@@ -30,0 +34,0 @@ this.enable = data.enable; |
@@ -56,6 +56,7 @@ (function (factory) { | ||
} | ||
if (data.filter !== undefined) { | ||
if (data.filter) { | ||
if ((0, engine_1.isString)(data.filter)) { | ||
if ((0, engine_1.isFunction)(window[data.filter])) { | ||
this.filter = window[data.filter]; | ||
const filterFunc = window[data.filter]; | ||
if ((0, engine_1.isFunction)(filterFunc)) { | ||
this.filter = filterFunc; | ||
} | ||
@@ -62,0 +63,0 @@ } |
@@ -17,2 +17,3 @@ (function (factory) { | ||
this.height = 24; | ||
this.style = ""; | ||
} | ||
@@ -19,0 +20,0 @@ load(data) { |
@@ -20,2 +20,3 @@ (function (factory) { | ||
this.volumeUp = new SoundsIcon_js_1.SoundsIcon(); | ||
this.enable = false; | ||
this.mute.svg = `<?xml version="1.0"?> | ||
@@ -62,2 +63,5 @@ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px" | ||
} | ||
if (data.enable !== undefined) { | ||
this.enable = data.enable; | ||
} | ||
this.mute.load(data.mute); | ||
@@ -64,0 +68,0 @@ this.unmute.load(data.unmute); |
@@ -15,9 +15,15 @@ (function (factory) { | ||
const utils_js_1 = require("./utils.js"); | ||
const zIndexOffset = 1, rightOffset = 1, minVolume = 0; | ||
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); | ||
const img = document.createElement("img"), { clickCb, container, display, iconOptions, margin, options, pos, rightOffsets } = data, { width, path, style, svg } = iconOptions, defaultAccumulator = 0; | ||
setIconStyle(img, pos.top + margin, pos.right - | ||
(margin * (rightOffsets.length + rightOffset) + | ||
width + | ||
rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style); | ||
img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : ""); | ||
const parent = container.canvas.element?.parentNode || document.body; | ||
const parent = container.canvas.element?.parentNode ?? document.body; | ||
parent.append(img); | ||
img.addEventListener("click", clickCb); | ||
img.addEventListener("click", () => { | ||
void clickCb(); | ||
}); | ||
return img; | ||
@@ -31,3 +37,3 @@ } | ||
} | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin) { | ||
function setIconStyle(icon, top, left, display, zIndex, width, margin, style) { | ||
icon.style.userSelect = "none"; | ||
@@ -39,3 +45,4 @@ icon.style.webkitUserSelect = "none"; | ||
icon.style.display = display; | ||
icon.style.zIndex = `${zIndex + 1}`; | ||
icon.style.zIndex = `${zIndex + zIndexOffset}`; | ||
icon.style.cssText += style; | ||
} | ||
@@ -61,3 +68,3 @@ class SoundsInstance { | ||
const cb = (args) => { | ||
(async () => { | ||
void (async () => { | ||
const filterNotValid = event.filter && !event.filter(args); | ||
@@ -67,3 +74,3 @@ if (this._container !== args.container) { | ||
} | ||
if (!this._container || this._container.muted || this._container.destroyed) { | ||
if (!this._container || !!this._container.muted || this._container.destroyed) { | ||
(0, engine_1.executeOnSingleOrMultiple)(event.event, (item) => { | ||
@@ -77,2 +84,3 @@ this._engine.removeEventListener(item, cb); | ||
} | ||
const defaultNoteIndex = 0; | ||
if (event.audio) { | ||
@@ -84,6 +92,6 @@ this._playBuffer((0, engine_1.itemFromSingleOrMultiple)(event.audio)); | ||
if (melody.melodies.length) { | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop))); | ||
await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, defaultNoteIndex, melody.loop))); | ||
} | ||
else { | ||
await this._playNote(melody.notes, 0, melody.loop); | ||
await this._playNote(melody.notes, defaultNoteIndex, melody.loop); | ||
} | ||
@@ -93,3 +101,3 @@ } | ||
const note = (0, engine_1.itemFromArray)(event.notes); | ||
await this._playNote([note], 0, false); | ||
await this._playNote([note], defaultNoteIndex, false); | ||
} | ||
@@ -103,7 +111,4 @@ })(); | ||
}; | ||
this._mute = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
return; | ||
} | ||
this._mute = async () => { | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
for (const source of this._audioSources) { | ||
@@ -115,3 +120,3 @@ this._removeAudioSource(source); | ||
} | ||
container.audioContext.close(); | ||
await audioContext.close(); | ||
container.audioContext = undefined; | ||
@@ -136,6 +141,6 @@ this._engine.dispatchEvent("soundsMuted", { container: this._container }); | ||
this._playFrequency = async (frequency, duration) => { | ||
if (!this._container.audioContext || !this._gain) { | ||
if (!this._gain || this._container.muted) { | ||
return; | ||
} | ||
const oscillator = this._addOscillator(this._container.audioContext); | ||
const audioContext = this._getAudioContext(), oscillator = this._addOscillator(audioContext); | ||
oscillator.connect(this._gain); | ||
@@ -153,10 +158,9 @@ oscillator.type = "sine"; | ||
this._playMuteSound = () => { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
if (this._container.muted) { | ||
return; | ||
} | ||
const gain = container.audioContext.createGain(); | ||
gain.connect(container.audioContext.destination); | ||
const audioContext = this._getAudioContext(), gain = audioContext.createGain(); | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = 0; | ||
const oscillator = container.audioContext.createOscillator(); | ||
const oscillator = audioContext.createOscillator(); | ||
oscillator.connect(gain); | ||
@@ -185,3 +189,4 @@ oscillator.type = "sine"; | ||
await ((0, engine_1.isArray)(promises) ? Promise.allSettled(promises) : promises); | ||
let nextNoteIdx = noteIdx + 1; | ||
const indexOffset = 1; | ||
let nextNoteIdx = noteIdx + indexOffset; | ||
if (loop && nextNoteIdx >= notes.length) { | ||
@@ -215,3 +220,4 @@ nextNoteIdx = nextNoteIdx % notes.length; | ||
source.disconnect(); | ||
this._audioSources.splice(this._audioSources.indexOf(source), 1); | ||
const deleteCount = 1; | ||
this._audioSources.splice(this._audioSources.indexOf(source), deleteCount); | ||
}; | ||
@@ -223,6 +229,3 @@ this._unmute = () => { | ||
} | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
const { audioContext } = container; | ||
const audioContext = this._getAudioContext(); | ||
if (!this._audioSources) { | ||
@@ -233,3 +236,3 @@ this._audioSources = []; | ||
gain.connect(audioContext.destination); | ||
gain.gain.value = soundsOptions.volume.value / 100; | ||
gain.gain.value = soundsOptions.volume.value / engine_1.percentDenominator; | ||
this._gain = gain; | ||
@@ -240,3 +243,7 @@ this._initEvents(); | ||
this._updateMuteIcons = () => { | ||
const container = this._container, muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable || !soundsOptions.icons.enable) { | ||
return; | ||
} | ||
const muteImg = this._muteImg, unmuteImg = this._unmuteImg; | ||
if (muteImg) { | ||
@@ -250,9 +257,9 @@ muteImg.style.display = container.muted ? "block" : "none"; | ||
this._updateMuteStatus = async () => { | ||
const container = this._container; | ||
const container = this._container, audioContext = this._getAudioContext(); | ||
if (container.muted) { | ||
await container.audioContext?.suspend(); | ||
this._mute(); | ||
await audioContext?.suspend(); | ||
await this._mute(); | ||
} | ||
else { | ||
await container.audioContext?.resume(); | ||
await audioContext?.resume(); | ||
this._unmute(); | ||
@@ -269,3 +276,3 @@ this._playMuteSound(); | ||
let stateChanged = false; | ||
if (this._volume <= 0 && !container.muted) { | ||
if (this._volume <= minVolume && !container.muted) { | ||
this._volume = 0; | ||
@@ -275,3 +282,3 @@ container.muted = true; | ||
} | ||
else if (this._volume > 0 && container.muted) { | ||
else if (this._volume > minVolume && container.muted) { | ||
container.muted = false; | ||
@@ -285,3 +292,3 @@ stateChanged = true; | ||
if (this._gain?.gain) { | ||
this._gain.gain.value = this._volume / 100; | ||
this._gain.gain.value = this._volume / engine_1.percentDenominator; | ||
} | ||
@@ -300,2 +307,16 @@ }; | ||
} | ||
if (soundsOptions.autoPlay && (0, utils_js_1.isWindowMuted)()) { | ||
const firstClickHandler = () => { | ||
removeEventListener(engine_1.mouseDownEvent, firstClickHandler); | ||
removeEventListener(engine_1.touchStartEvent, firstClickHandler); | ||
(0, utils_js_1.unmuteWindow)(); | ||
void this.unmute(); | ||
}; | ||
const listenerOptions = { | ||
capture: true, | ||
once: true, | ||
}; | ||
addEventListener(engine_1.mouseDownEvent, firstClickHandler, listenerOptions); | ||
addEventListener(engine_1.touchStartEvent, firstClickHandler, listenerOptions); | ||
} | ||
this._volume = soundsOptions.volume.value; | ||
@@ -308,3 +329,3 @@ const events = soundsOptions.events; | ||
} | ||
(0, engine_1.executeOnSingleOrMultiple)(event.audio, async (audio) => { | ||
const promises = (0, engine_1.executeOnSingleOrMultiple)(event.audio, async (audio) => { | ||
const response = await fetch(audio.source); | ||
@@ -314,9 +335,18 @@ if (!response.ok) { | ||
} | ||
const arrayBuffer = await response.arrayBuffer(); | ||
container.audioContext = new AudioContext(); | ||
const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer); | ||
const arrayBuffer = await response.arrayBuffer(), audioContext = this._getAudioContext(), audioBuffer = await audioContext.decodeAudioData(arrayBuffer); | ||
this._audioMap.set(audio.source, audioBuffer); | ||
}); | ||
if (promises instanceof Promise) { | ||
await promises; | ||
} | ||
else { | ||
await Promise.allSettled(promises); | ||
} | ||
} | ||
} | ||
async mute() { | ||
if (!this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async start() { | ||
@@ -331,8 +361,5 @@ const container = this._container, options = container.actualOptions, soundsOptions = options.sounds; | ||
right: canvas.offsetLeft + canvas.offsetWidth, | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10; | ||
const toggleMute = async () => { | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
}; | ||
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10, toggleMute = async () => { | ||
await this.toggleMute(); | ||
}, enableIcons = soundsOptions.icons.enable, display = enableIcons ? "block" : "none"; | ||
this._muteImg = initImage({ | ||
@@ -342,3 +369,3 @@ container, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: mute, | ||
@@ -363,3 +390,3 @@ margin, | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeDown, | ||
@@ -369,7 +396,3 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeDown(); | ||
}, | ||
@@ -381,3 +404,3 @@ }); | ||
pos, | ||
display: "block", | ||
display, | ||
iconOptions: volumeUp, | ||
@@ -387,20 +410,58 @@ margin, | ||
clickCb: async () => { | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
await this.volumeUp(); | ||
}, | ||
}); | ||
if (!(0, utils_js_1.isWindowMuted)() && soundsOptions.autoPlay) { | ||
await this.unmute(); | ||
} | ||
} | ||
stop() { | ||
this._container.muted = true; | ||
this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
void (async () => { | ||
await this._mute(); | ||
removeImage(this._muteImg); | ||
removeImage(this._unmuteImg); | ||
removeImage(this._volumeDownImg); | ||
removeImage(this._volumeUpImg); | ||
})(); | ||
} | ||
async toggleMute() { | ||
const container = this._container; | ||
container.muted = !container.muted; | ||
this._updateMuteIcons(); | ||
await this._updateMuteStatus(); | ||
} | ||
async unmute() { | ||
if (this._container.muted) { | ||
await this.toggleMute(); | ||
} | ||
} | ||
async volumeDown() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
if (container.muted) { | ||
this._volume = 0; | ||
} | ||
this._volume -= soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
async volumeUp() { | ||
const container = this._container, soundsOptions = container.actualOptions.sounds; | ||
if (!soundsOptions?.enable) { | ||
return; | ||
} | ||
this._volume += soundsOptions.volume.step; | ||
await this._updateVolume(); | ||
} | ||
_getAudioContext() { | ||
const container = this._container; | ||
if (!container.audioContext) { | ||
container.audioContext = new AudioContext(); | ||
} | ||
return container.audioContext; | ||
} | ||
} | ||
exports.SoundsInstance = SoundsInstance; | ||
}); |
@@ -12,3 +12,3 @@ (function (factory) { | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.getNoteFrequency = void 0; | ||
exports.unmuteWindow = exports.isWindowMuted = exports.getNoteFrequency = void 0; | ||
const notes = new Map(); | ||
@@ -29,13 +29,22 @@ notes.set("C", [16.35, 32.7, 65.41, 130.81, 261.63, 523.25, 1046.5, 2093.0, 4186.01]); | ||
function getNoteFrequency(note) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note); | ||
if (!result || !result.length) { | ||
const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note), groupKey = 2, defaultMatchKey = 0, innerGroupKey = 3; | ||
if (!result?.length) { | ||
return; | ||
} | ||
const noteKey = result[2] || result[0], noteItem = notes.get(noteKey); | ||
const noteKey = result[groupKey] || result[defaultMatchKey], noteItem = notes.get(noteKey); | ||
if (!noteItem) { | ||
return; | ||
} | ||
return noteItem[parseInt(result[3] || "0")]; | ||
return noteItem[parseInt(result[innerGroupKey] || "0")]; | ||
} | ||
exports.getNoteFrequency = getNoteFrequency; | ||
let muted = true; | ||
const isWindowMuted = () => { | ||
return muted; | ||
}; | ||
exports.isWindowMuted = isWindowMuted; | ||
const unmuteWindow = () => { | ||
muted = false; | ||
}; | ||
exports.unmuteWindow = unmuteWindow; | ||
}); |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
482025
4629
Updated@tsparticles/engine@^3.1.0