@tsparticles/plugin-sounds 3.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +70 -0
  3. package/browser/Options/Classes/Sounds.js +30 -0
  4. package/browser/Options/Classes/SoundsAudio.js +22 -0
  5. package/browser/Options/Classes/SoundsEvent.js +54 -0
  6. package/browser/Options/Classes/SoundsIcon.js +23 -0
  7. package/browser/Options/Classes/SoundsIcons.js +54 -0
  8. package/browser/Options/Classes/SoundsMelody.js +30 -0
  9. package/browser/Options/Classes/SoundsNote.js +17 -0
  10. package/browser/Options/Classes/SoundsVolume.js +30 -0
  11. package/browser/Options/Interfaces/ISounds.js +1 -0
  12. package/browser/Options/Interfaces/ISoundsAudio.js +1 -0
  13. package/browser/Options/Interfaces/ISoundsEvent.js +1 -0
  14. package/browser/Options/Interfaces/ISoundsIcon.js +1 -0
  15. package/browser/Options/Interfaces/ISoundsIcons.js +1 -0
  16. package/browser/Options/Interfaces/ISoundsMelody.js +1 -0
  17. package/browser/Options/Interfaces/ISoundsNote.js +1 -0
  18. package/browser/Options/Interfaces/ISoundsVolume.js +1 -0
  19. package/browser/SoundsInstance.js +336 -0
  20. package/browser/enums.js +1 -0
  21. package/browser/index.js +29 -0
  22. package/browser/types.js +1 -0
  23. package/browser/utils.js +26 -0
  24. package/cjs/Options/Classes/Sounds.js +34 -0
  25. package/cjs/Options/Classes/SoundsAudio.js +26 -0
  26. package/cjs/Options/Classes/SoundsEvent.js +58 -0
  27. package/cjs/Options/Classes/SoundsIcon.js +27 -0
  28. package/cjs/Options/Classes/SoundsIcons.js +58 -0
  29. package/cjs/Options/Classes/SoundsMelody.js +34 -0
  30. package/cjs/Options/Classes/SoundsNote.js +21 -0
  31. package/cjs/Options/Classes/SoundsVolume.js +34 -0
  32. package/cjs/Options/Interfaces/ISounds.js +2 -0
  33. package/cjs/Options/Interfaces/ISoundsAudio.js +2 -0
  34. package/cjs/Options/Interfaces/ISoundsEvent.js +2 -0
  35. package/cjs/Options/Interfaces/ISoundsIcon.js +2 -0
  36. package/cjs/Options/Interfaces/ISoundsIcons.js +2 -0
  37. package/cjs/Options/Interfaces/ISoundsMelody.js +2 -0
  38. package/cjs/Options/Interfaces/ISoundsNote.js +2 -0
  39. package/cjs/Options/Interfaces/ISoundsVolume.js +2 -0
  40. package/cjs/SoundsInstance.js +359 -0
  41. package/cjs/enums.js +2 -0
  42. package/cjs/index.js +44 -0
  43. package/cjs/types.js +2 -0
  44. package/cjs/utils.js +30 -0
  45. package/esm/Options/Classes/Sounds.js +30 -0
  46. package/esm/Options/Classes/SoundsAudio.js +22 -0
  47. package/esm/Options/Classes/SoundsEvent.js +54 -0
  48. package/esm/Options/Classes/SoundsIcon.js +23 -0
  49. package/esm/Options/Classes/SoundsIcons.js +54 -0
  50. package/esm/Options/Classes/SoundsMelody.js +30 -0
  51. package/esm/Options/Classes/SoundsNote.js +17 -0
  52. package/esm/Options/Classes/SoundsVolume.js +30 -0
  53. package/esm/Options/Interfaces/ISounds.js +1 -0
  54. package/esm/Options/Interfaces/ISoundsAudio.js +1 -0
  55. package/esm/Options/Interfaces/ISoundsEvent.js +1 -0
  56. package/esm/Options/Interfaces/ISoundsIcon.js +1 -0
  57. package/esm/Options/Interfaces/ISoundsIcons.js +1 -0
  58. package/esm/Options/Interfaces/ISoundsMelody.js +1 -0
  59. package/esm/Options/Interfaces/ISoundsNote.js +1 -0
  60. package/esm/Options/Interfaces/ISoundsVolume.js +1 -0
  61. package/esm/SoundsInstance.js +336 -0
  62. package/esm/enums.js +1 -0
  63. package/esm/index.js +29 -0
  64. package/esm/types.js +1 -0
  65. package/esm/utils.js +26 -0
  66. package/package.json +81 -0
  67. package/report.html +39 -0
  68. package/tsparticles.plugin.sounds.js +780 -0
  69. package/tsparticles.plugin.sounds.min.js +2 -0
  70. package/tsparticles.plugin.sounds.min.js.LICENSE.txt +8 -0
  71. package/types/Options/Classes/Sounds.d.ts +13 -0
  72. package/types/Options/Classes/SoundsAudio.d.ts +8 -0
  73. package/types/Options/Classes/SoundsEvent.d.ts +20 -0
  74. package/types/Options/Classes/SoundsIcon.d.ts +10 -0
  75. package/types/Options/Classes/SoundsIcons.d.ts +11 -0
  76. package/types/Options/Classes/SoundsMelody.d.ts +10 -0
  77. package/types/Options/Classes/SoundsNote.d.ts +8 -0
  78. package/types/Options/Classes/SoundsVolume.d.ts +10 -0
  79. package/types/Options/Interfaces/ISounds.d.ts +9 -0
  80. package/types/Options/Interfaces/ISoundsAudio.d.ts +4 -0
  81. package/types/Options/Interfaces/ISoundsEvent.d.ts +12 -0
  82. package/types/Options/Interfaces/ISoundsIcon.d.ts +6 -0
  83. package/types/Options/Interfaces/ISoundsIcons.d.ts +7 -0
  84. package/types/Options/Interfaces/ISoundsMelody.d.ts +6 -0
  85. package/types/Options/Interfaces/ISoundsNote.d.ts +5 -0
  86. package/types/Options/Interfaces/ISoundsVolume.d.ts +6 -0
  87. package/types/SoundsInstance.d.ts +32 -0
  88. package/types/enums.d.ts +4 -0
  89. package/types/index.d.ts +2 -0
  90. package/types/types.d.ts +15 -0
  91. package/types/utils.d.ts +1 -0
  92. package/umd/Options/Classes/Sounds.js +44 -0
  93. package/umd/Options/Classes/SoundsAudio.js +36 -0
  94. package/umd/Options/Classes/SoundsEvent.js +68 -0
  95. package/umd/Options/Classes/SoundsIcon.js +37 -0
  96. package/umd/Options/Classes/SoundsIcons.js +68 -0
  97. package/umd/Options/Classes/SoundsMelody.js +44 -0
  98. package/umd/Options/Classes/SoundsNote.js +31 -0
  99. package/umd/Options/Classes/SoundsVolume.js +44 -0
  100. package/umd/Options/Interfaces/ISounds.js +12 -0
  101. package/umd/Options/Interfaces/ISoundsAudio.js +12 -0
  102. package/umd/Options/Interfaces/ISoundsEvent.js +12 -0
  103. package/umd/Options/Interfaces/ISoundsIcon.js +12 -0
  104. package/umd/Options/Interfaces/ISoundsIcons.js +12 -0
  105. package/umd/Options/Interfaces/ISoundsMelody.js +12 -0
  106. package/umd/Options/Interfaces/ISoundsNote.js +12 -0
  107. package/umd/Options/Interfaces/ISoundsVolume.js +12 -0
  108. package/umd/SoundsInstance.js +350 -0
  109. package/umd/enums.js +12 -0
  110. package/umd/index.js +43 -0
  111. package/umd/types.js +12 -0
  112. package/umd/utils.js +40 -0
@@ -0,0 +1,54 @@
1
+ import { SoundsIcon } from "./SoundsIcon";
2
+ export class SoundsIcons {
3
+ constructor() {
4
+ this.mute = new SoundsIcon();
5
+ this.unmute = new SoundsIcon();
6
+ this.volumeDown = new SoundsIcon();
7
+ this.volumeUp = new SoundsIcon();
8
+ this.mute.svg = `<?xml version="1.0"?>
9
+ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"
10
+ xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
11
+ xmlns:xlink="http://www.w3.org/1999/xlink">
12
+ <g id="Layer_1">
13
+ <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"/>
14
+ </g>
15
+ </svg>`;
16
+ this.unmute.svg = `<?xml version="1.0"?>
17
+ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"
18
+ xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
19
+ xmlns:xlink="http://www.w3.org/1999/xlink">
20
+ <g id="Layer_1">
21
+ <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"/>
22
+ </g>
23
+ </svg>`;
24
+ this.volumeDown.svg = `<?xml version="1.0"?>
25
+ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"
26
+ xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
27
+ xmlns:xlink="http://www.w3.org/1999/xlink">
28
+ <g id="Layer_1">
29
+ <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"/>
30
+ <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"/>
31
+ </g>
32
+ </svg>`;
33
+ this.volumeUp.svg = `<?xml version="1.0"?>
34
+ <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"
35
+ xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
36
+ xmlns:xlink="http://www.w3.org/1999/xlink">
37
+ <g id="Layer_1">
38
+ <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"/>
39
+ <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"/>
40
+ <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"/>
41
+ <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"/>
42
+ </g>
43
+ </svg>`;
44
+ }
45
+ load(data) {
46
+ if (!data) {
47
+ return;
48
+ }
49
+ this.mute.load(data.mute);
50
+ this.unmute.load(data.unmute);
51
+ this.volumeDown.load(data.volumeDown);
52
+ this.volumeUp.load(data.volumeUp);
53
+ }
54
+ }
@@ -0,0 +1,30 @@
1
+ import { SoundsNote } from "./SoundsNote";
2
+ export class SoundsMelody {
3
+ constructor() {
4
+ this.loop = false;
5
+ this.melodies = [];
6
+ this.notes = [];
7
+ }
8
+ load(data) {
9
+ if (data === undefined) {
10
+ return;
11
+ }
12
+ if (data.loop !== undefined) {
13
+ this.loop = data.loop;
14
+ }
15
+ if (data.melodies !== undefined) {
16
+ this.melodies = data.melodies.map((s) => {
17
+ const tmp = new SoundsMelody();
18
+ tmp.load(s);
19
+ return tmp;
20
+ });
21
+ }
22
+ if (data.notes !== undefined) {
23
+ this.notes = data.notes.map((s) => {
24
+ const tmp = new SoundsNote();
25
+ tmp.load(s);
26
+ return tmp;
27
+ });
28
+ }
29
+ }
30
+ }
@@ -0,0 +1,17 @@
1
+ export class SoundsNote {
2
+ constructor() {
3
+ this.duration = 500;
4
+ this.value = [];
5
+ }
6
+ load(data) {
7
+ if (!data) {
8
+ return;
9
+ }
10
+ if (data.duration !== undefined) {
11
+ this.duration = data.duration;
12
+ }
13
+ if (data.value !== undefined) {
14
+ this.value = data.value;
15
+ }
16
+ }
17
+ }
@@ -0,0 +1,30 @@
1
+ export class SoundsVolume {
2
+ constructor() {
3
+ this.value = 100;
4
+ this.max = 100;
5
+ this.min = 0;
6
+ this.step = 10;
7
+ }
8
+ load(data) {
9
+ if (data === undefined) {
10
+ return;
11
+ }
12
+ if (typeof data === "object") {
13
+ if (data.max !== undefined) {
14
+ this.max = data.max;
15
+ }
16
+ if (data.min !== undefined) {
17
+ this.min = data.min;
18
+ }
19
+ if (data.step !== undefined) {
20
+ this.step = data.step;
21
+ }
22
+ if (data.value !== undefined) {
23
+ this.value = data.value;
24
+ }
25
+ }
26
+ else {
27
+ this.value = data;
28
+ }
29
+ }
30
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,336 @@
1
+ import { clamp, itemFromArray, itemFromSingleOrMultiple } from "@tsparticles/engine";
2
+ import { executeOnSingleOrMultiple } from "@tsparticles/engine";
3
+ import { getNoteFrequency } from "./utils";
4
+ function setIconStyle(icon, top, left, display, zIndex, width, margin) {
5
+ icon.style.userSelect = "none";
6
+ icon.style.webkitUserSelect = "none";
7
+ icon.style.position = "absolute";
8
+ icon.style.top = `${top + margin}px`;
9
+ icon.style.left = `${left - margin - width}px`;
10
+ icon.style.display = display;
11
+ icon.style.zIndex = `${zIndex + 1}`;
12
+ }
13
+ export class SoundsInstance {
14
+ constructor(container, engine) {
15
+ this._container = container;
16
+ this._engine = engine;
17
+ this._volume = 0;
18
+ this._audioSources = [];
19
+ this._audioMap = new Map();
20
+ }
21
+ async init() {
22
+ const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
23
+ if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
24
+ return;
25
+ }
26
+ this._volume = soundsOptions.volume.value;
27
+ const events = soundsOptions.events;
28
+ this._audioMap = new Map();
29
+ for (const event of events) {
30
+ if (!event.audio) {
31
+ continue;
32
+ }
33
+ executeOnSingleOrMultiple(event.audio, async (audio) => {
34
+ const response = await fetch(audio.source);
35
+ if (!response.ok) {
36
+ return;
37
+ }
38
+ const arrayBuffer = await response.arrayBuffer();
39
+ container.audioContext = new AudioContext();
40
+ const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer);
41
+ this._audioMap.set(audio.source, audioBuffer);
42
+ });
43
+ }
44
+ }
45
+ async start() {
46
+ var _a, _b, _c, _d;
47
+ const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
48
+ if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable) || !container.canvas.element) {
49
+ return;
50
+ }
51
+ container.muted = true;
52
+ this._muteImg = document.createElement("img");
53
+ this._unmuteImg = document.createElement("img");
54
+ this._volumeDownImg = document.createElement("img");
55
+ this._volumeUpImg = document.createElement("img");
56
+ const muteImg = this._muteImg, unmuteImg = this._unmuteImg, volumeDownImg = this._volumeDownImg, volumeUpImg = this._volumeUpImg, containerTop = container.canvas.element.offsetTop, containerRight = container.canvas.element.offsetLeft + container.canvas.element.offsetWidth, iconsOptions = soundsOptions.icons, muteOptions = iconsOptions.mute, unmuteOptions = iconsOptions.unmute, volumeDownOptions = iconsOptions.volumeDown, volumeUpOptions = iconsOptions.volumeUp, margin = 10;
57
+ setIconStyle(muteImg, containerTop + margin, containerRight - margin * 3 - muteOptions.width - volumeDownOptions.width - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, muteOptions.width, margin);
58
+ setIconStyle(unmuteImg, containerTop + margin, containerRight - margin * 3 - unmuteOptions.width - volumeDownOptions.width - volumeUpOptions.width, "none", options.fullScreen.zIndex + 1, unmuteOptions.width, margin);
59
+ setIconStyle(volumeDownImg, containerTop + margin, containerRight - margin * 2 - volumeDownOptions.width - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, volumeDownOptions.width, margin);
60
+ setIconStyle(volumeUpImg, containerTop + margin, containerRight - margin - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, volumeUpOptions.width, margin);
61
+ muteImg.src = (_a = muteOptions.path) !== null && _a !== void 0 ? _a : (muteOptions.svg ? `data:image/svg+xml;base64,${btoa(muteOptions.svg)}` : "");
62
+ unmuteImg.src =
63
+ (_b = unmuteOptions.path) !== null && _b !== void 0 ? _b : (unmuteOptions.svg ? `data:image/svg+xml;base64,${btoa(unmuteOptions.svg)}` : "");
64
+ volumeDownImg.src =
65
+ (_c = volumeDownOptions.path) !== null && _c !== void 0 ? _c : (volumeDownOptions.svg ? `data:image/svg+xml;base64,${btoa(volumeDownOptions.svg)}` : "");
66
+ volumeUpImg.src =
67
+ (_d = volumeUpOptions.path) !== null && _d !== void 0 ? _d : (volumeUpOptions.svg ? `data:image/svg+xml;base64,${btoa(volumeUpOptions.svg)}` : "");
68
+ const parent = container.canvas.element.parentNode || document.body;
69
+ parent.append(muteImg);
70
+ parent.append(unmuteImg);
71
+ parent.append(volumeDownImg);
72
+ parent.append(volumeUpImg);
73
+ const toggleMute = () => {
74
+ container.muted = !container.muted;
75
+ this._updateMuteIcons();
76
+ this._updateMuteStatus();
77
+ };
78
+ const volumeDown = () => {
79
+ if (container.muted) {
80
+ this._volume = 0;
81
+ }
82
+ this._volume -= soundsOptions.volume.step;
83
+ this._updateVolume();
84
+ };
85
+ const volumeUp = () => {
86
+ if (container.muted) {
87
+ this._volume = 0;
88
+ }
89
+ this._volume += soundsOptions.volume.step;
90
+ this._updateVolume();
91
+ };
92
+ muteImg.addEventListener("click", toggleMute);
93
+ unmuteImg.addEventListener("click", toggleMute);
94
+ volumeDownImg.addEventListener("click", volumeDown);
95
+ volumeUpImg.addEventListener("click", volumeUp);
96
+ }
97
+ stop() {
98
+ this._container.muted = true;
99
+ this._mute();
100
+ if (this._muteImg) {
101
+ this._muteImg.remove();
102
+ }
103
+ if (this._unmuteImg) {
104
+ this._unmuteImg.remove();
105
+ }
106
+ if (this._volumeDownImg) {
107
+ this._volumeDownImg.remove();
108
+ }
109
+ if (this._volumeUpImg) {
110
+ this._volumeUpImg.remove();
111
+ }
112
+ }
113
+ _addBuffer(audioCtx) {
114
+ const buffer = audioCtx.createBufferSource();
115
+ this._audioSources.push(buffer);
116
+ return buffer;
117
+ }
118
+ _addOscillator(audioCtx) {
119
+ const oscillator = audioCtx.createOscillator();
120
+ this._audioSources.push(oscillator);
121
+ return oscillator;
122
+ }
123
+ _initEvents() {
124
+ const container = this._container, soundsOptions = container.actualOptions.sounds;
125
+ if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable) || !container.canvas.element) {
126
+ return;
127
+ }
128
+ for (const event of soundsOptions.events) {
129
+ const cb = async (args) => {
130
+ if (this._container !== args.container) {
131
+ return;
132
+ }
133
+ if (!this._container || this._container.muted || this._container.destroyed) {
134
+ executeOnSingleOrMultiple(event.event, (item) => {
135
+ this._engine.removeEventListener(item, cb);
136
+ });
137
+ return;
138
+ }
139
+ if (event.filter && !event.filter(args)) {
140
+ return;
141
+ }
142
+ if (event.audio) {
143
+ this._playBuffer(itemFromSingleOrMultiple(event.audio));
144
+ }
145
+ else if (event.melodies) {
146
+ const melody = itemFromArray(event.melodies);
147
+ if (melody.melodies.length) {
148
+ await Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop)));
149
+ }
150
+ else {
151
+ await this._playNote(melody.notes, 0, melody.loop);
152
+ }
153
+ }
154
+ else if (event.notes) {
155
+ const note = itemFromArray(event.notes);
156
+ await this._playNote([note], 0, false);
157
+ }
158
+ };
159
+ executeOnSingleOrMultiple(event.event, (item) => {
160
+ this._engine.addEventListener(item, cb);
161
+ });
162
+ }
163
+ }
164
+ _mute() {
165
+ const container = this._container;
166
+ if (!container.audioContext) {
167
+ return;
168
+ }
169
+ for (const source of this._audioSources) {
170
+ this._removeAudioSource(source);
171
+ }
172
+ if (this._gain) {
173
+ this._gain.disconnect();
174
+ }
175
+ container.audioContext.close();
176
+ container.audioContext = undefined;
177
+ this._engine.dispatchEvent("soundsMuted", { container: this._container });
178
+ }
179
+ _playBuffer(audio) {
180
+ var _a;
181
+ const audioBuffer = this._audioMap.get(audio.source);
182
+ if (!audioBuffer) {
183
+ return;
184
+ }
185
+ const audioCtx = this._container.audioContext;
186
+ if (!audioCtx) {
187
+ return;
188
+ }
189
+ const source = this._addBuffer(audioCtx);
190
+ source.loop = audio.loop;
191
+ source.buffer = audioBuffer;
192
+ source.connect((_a = this._gain) !== null && _a !== void 0 ? _a : audioCtx.destination);
193
+ source.start();
194
+ }
195
+ async _playFrequency(frequency, duration) {
196
+ if (!this._container.audioContext || !this._gain) {
197
+ return;
198
+ }
199
+ const oscillator = this._addOscillator(this._container.audioContext);
200
+ oscillator.connect(this._gain);
201
+ oscillator.type = "sine";
202
+ oscillator.frequency.value = frequency;
203
+ oscillator.start();
204
+ return new Promise((resolve) => {
205
+ setTimeout(() => {
206
+ this._removeAudioSource(oscillator);
207
+ resolve();
208
+ }, duration);
209
+ });
210
+ }
211
+ _playMuteSound() {
212
+ const container = this._container;
213
+ if (!container.audioContext) {
214
+ return;
215
+ }
216
+ const gain = container.audioContext.createGain();
217
+ gain.connect(container.audioContext.destination);
218
+ gain.gain.value = 0;
219
+ const oscillator = container.audioContext.createOscillator();
220
+ oscillator.connect(gain);
221
+ oscillator.type = "sine";
222
+ oscillator.frequency.value = 1;
223
+ oscillator.start();
224
+ setTimeout(() => {
225
+ oscillator.stop();
226
+ oscillator.disconnect();
227
+ gain.disconnect();
228
+ });
229
+ }
230
+ async _playNote(notes, noteIdx, loop) {
231
+ if (this._container.muted) {
232
+ return;
233
+ }
234
+ const note = notes[noteIdx];
235
+ if (!note) {
236
+ return;
237
+ }
238
+ const value = note.value;
239
+ const promises = executeOnSingleOrMultiple(value, async (_, idx) => {
240
+ return this._playNoteValue(notes, noteIdx, idx);
241
+ });
242
+ await (promises instanceof Array ? Promise.allSettled(promises) : promises);
243
+ let nextNoteIdx = noteIdx + 1;
244
+ if (loop && nextNoteIdx >= notes.length) {
245
+ nextNoteIdx = nextNoteIdx % notes.length;
246
+ }
247
+ if (this._container.muted) {
248
+ return;
249
+ }
250
+ await this._playNote(notes, nextNoteIdx, loop);
251
+ }
252
+ async _playNoteValue(notes, noteIdx, valueIdx) {
253
+ const note = notes[noteIdx];
254
+ if (!note) {
255
+ return;
256
+ }
257
+ const value = itemFromSingleOrMultiple(note.value, valueIdx, true);
258
+ try {
259
+ const freq = getNoteFrequency(value);
260
+ if (typeof freq !== "number") {
261
+ return;
262
+ }
263
+ await this._playFrequency(freq, note.duration);
264
+ }
265
+ catch (e) {
266
+ console.error(e);
267
+ }
268
+ }
269
+ _removeAudioSource(source) {
270
+ source.stop();
271
+ source.disconnect();
272
+ this._audioSources.splice(this._audioSources.indexOf(source), 1);
273
+ }
274
+ _unmute() {
275
+ const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
276
+ if (!soundsOptions) {
277
+ return;
278
+ }
279
+ if (!container.audioContext) {
280
+ container.audioContext = new AudioContext();
281
+ }
282
+ if (!this._audioSources) {
283
+ this._audioSources = [];
284
+ }
285
+ const gain = container.audioContext.createGain();
286
+ gain.connect(container.audioContext.destination);
287
+ gain.gain.value = soundsOptions.volume.value / 100;
288
+ this._gain = gain;
289
+ this._initEvents();
290
+ this._engine.dispatchEvent("soundsUnmuted", { container: this._container });
291
+ }
292
+ _updateMuteIcons() {
293
+ const container = this._container, muteImg = this._muteImg, unmuteImg = this._unmuteImg;
294
+ if (muteImg) {
295
+ muteImg.style.display = container.muted ? "block" : "none";
296
+ }
297
+ if (unmuteImg) {
298
+ unmuteImg.style.display = container.muted ? "none" : "block";
299
+ }
300
+ }
301
+ _updateMuteStatus() {
302
+ const container = this._container;
303
+ if (container.muted) {
304
+ this._mute();
305
+ }
306
+ else {
307
+ this._unmute();
308
+ this._playMuteSound();
309
+ }
310
+ }
311
+ _updateVolume() {
312
+ var _a;
313
+ const container = this._container, soundsOptions = container.actualOptions.sounds;
314
+ if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
315
+ return;
316
+ }
317
+ clamp(this._volume, soundsOptions.volume.min, soundsOptions.volume.max);
318
+ let stateChanged = false;
319
+ if (this._volume <= 0 && !container.muted) {
320
+ this._volume = 0;
321
+ container.muted = true;
322
+ stateChanged = true;
323
+ }
324
+ else if (this._volume > 0 && container.muted) {
325
+ container.muted = false;
326
+ stateChanged = true;
327
+ }
328
+ if (stateChanged) {
329
+ this._updateMuteIcons();
330
+ this._updateMuteStatus();
331
+ }
332
+ if ((_a = this._gain) === null || _a === void 0 ? void 0 : _a.gain) {
333
+ this._gain.gain.value = this._volume / 100;
334
+ }
335
+ }
336
+ }
package/esm/enums.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/esm/index.js ADDED
@@ -0,0 +1,29 @@
1
+ import { Sounds } from "./Options/Classes/Sounds";
2
+ import { SoundsInstance } from "./SoundsInstance";
3
+ class SoundsPlugin {
4
+ constructor(engine) {
5
+ this.id = "sounds";
6
+ this._engine = engine;
7
+ }
8
+ getPlugin(container) {
9
+ return new SoundsInstance(container, this._engine);
10
+ }
11
+ loadOptions(options, source) {
12
+ if (!this.needsPlugin(source)) {
13
+ return;
14
+ }
15
+ let soundsOptions = options.sounds;
16
+ if ((soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.load) === undefined) {
17
+ options.sounds = soundsOptions = new Sounds();
18
+ }
19
+ soundsOptions.load(source === null || source === void 0 ? void 0 : source.sounds);
20
+ }
21
+ needsPlugin(options) {
22
+ var _a, _b;
23
+ return (_b = (_a = options === null || options === void 0 ? void 0 : options.sounds) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
24
+ }
25
+ }
26
+ export async function loadSoundsPlugin(engine) {
27
+ const plugin = new SoundsPlugin(engine);
28
+ await engine.addPlugin(plugin);
29
+ }
package/esm/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/esm/utils.js ADDED
@@ -0,0 +1,26 @@
1
+ const notes = new Map();
2
+ notes.set("C", [16.35, 32.7, 65.41, 130.81, 261.63, 523.25, 1046.5, 2093.0, 4186.01]);
3
+ notes.set("Db", [17.32, 34.65, 69.3, 138.59, 277.18, 554.37, 1108.73, 2217.46, 4434.92]);
4
+ notes.set("D", [18.35, 36.71, 73.42, 146.83, 293.66, 587.33, 1174.66, 2349.32, 4698.63]);
5
+ notes.set("Eb", [19.45, 38.89, 77.78, 155.56, 311.13, 622.25, 1244.51, 2489.02, 4978.03]);
6
+ notes.set("E", [20.6, 41.2, 82.41, 164.81, 329.63, 659.25, 1318.51, 2637.02, 5274.04]);
7
+ notes.set("F", [21.83, 43.65, 87.31, 174.61, 349.23, 698.46, 1396.91, 2793.83, 5587.65]);
8
+ notes.set("Gb", [23.12, 46.25, 92.5, 185.0, 369.99, 739.99, 1479.98, 2959.96, 5919.91]);
9
+ notes.set("G", [24.5, 49.0, 98.0, 196.0, 392.0, 783.99, 1567.98, 3135.96, 6271.93]);
10
+ notes.set("Ab", [25.96, 51.91, 103.83, 207.65, 415.3, 830.61, 1661.22, 3322.44, 6644.88]);
11
+ notes.set("A", [27.5, 55.0, 110.0, 220.0, 440.0, 880.0, 1760.0, 3520.0, 7040.0]);
12
+ notes.set("Bb", [29.14, 58.27, 116.54, 233.08, 466.16, 932.33, 1864.66, 3729.31, 7458.62]);
13
+ notes.set("B", [30.87, 61.74, 123.47, 246.94, 493.88, 987.77, 1975.53, 3951.07, 7902.13]);
14
+ notes.set("pause", [0]);
15
+ export function getNoteFrequency(note) {
16
+ const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note);
17
+ if (!result || !result.length) {
18
+ return;
19
+ }
20
+ console.log(result);
21
+ const noteKey = result[2] || result[0], noteItem = notes.get(noteKey);
22
+ if (!noteItem) {
23
+ return;
24
+ }
25
+ return noteItem[parseInt(result[3] || "0")];
26
+ }
package/package.json ADDED
@@ -0,0 +1,81 @@
1
+ {
2
+ "name": "@tsparticles/plugin-sounds",
3
+ "version": "3.0.0-alpha.0",
4
+ "description": "tsParticles sounds plugin",
5
+ "homepage": "https://particles.js.org",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/matteobruni/tsparticles.git",
9
+ "directory": "plugins/sounds"
10
+ },
11
+ "keywords": [
12
+ "front-end",
13
+ "frontend",
14
+ "tsparticles",
15
+ "particles.js",
16
+ "particlesjs",
17
+ "particles",
18
+ "particle",
19
+ "canvas",
20
+ "jsparticles",
21
+ "xparticles",
22
+ "particles-js",
23
+ "particles-bg",
24
+ "particles-bg-vue",
25
+ "particles-ts",
26
+ "particles.ts",
27
+ "react-particles-js",
28
+ "react-particles.js",
29
+ "react-particles",
30
+ "react",
31
+ "reactjs",
32
+ "vue-particles",
33
+ "ngx-particles",
34
+ "angular-particles",
35
+ "particleground",
36
+ "vue",
37
+ "vuejs",
38
+ "preact",
39
+ "preactjs",
40
+ "jquery",
41
+ "angularjs",
42
+ "angular",
43
+ "typescript",
44
+ "javascript",
45
+ "animation",
46
+ "web",
47
+ "html5",
48
+ "web-design",
49
+ "webdesign",
50
+ "css",
51
+ "html",
52
+ "css3",
53
+ "animated",
54
+ "background",
55
+ "confetti",
56
+ "canvas",
57
+ "fireworks",
58
+ "fireworks-js",
59
+ "confetti-js",
60
+ "confettijs",
61
+ "fireworksjs",
62
+ "canvas-confetti",
63
+ "@tsparticles/plugin"
64
+ ],
65
+ "author": "Matteo Bruni <matteo.bruni@me.com>",
66
+ "license": "MIT",
67
+ "bugs": {
68
+ "url": "https://github.com/matteobruni/tsparticles/issues"
69
+ },
70
+ "main": "cjs/index.js",
71
+ "jsdelivr": "tsparticles.plugin.sounds.min.js",
72
+ "unpkg": "tsparticles.plugin.sounds.min.js",
73
+ "module": "esm/index.js",
74
+ "types": "types/index.d.ts",
75
+ "publishConfig": {
76
+ "access": "public"
77
+ },
78
+ "dependencies": {
79
+ "@tsparticles/engine": "^3.0.0-alpha.0"
80
+ }
81
+ }