Some UI changes

js/main.js

@@ -7,14 +7,29 @@ import Scene from "./scene.js";
 // Realize our app
 let APP = ATON.App.realize();
 
-// You can require here flares (plugins) if needed by the app
-//APP.requireFlares(["myFlare","anotherFlare"]);
+APP.UI = {};
+
+/**
+ * 
+ * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
+ */
+APP.UI.pauseAudio = function(triggerSelector) {
+    // What if more than one audio element is playing?
+    const audio = document.querySelector('audio');
+    document.querySelectorAll(triggerSelector).forEach(el => {
+        el.addEventListener('click', () => audio.pause());
+    });
+    document.querySelector('.modal').addEventListener('blur', () => {
+        audio.pause();
+    });
+}
 
 // APP.setup() is required for web-app initialization
 // You can place here UI setup (HTML), events handling, etc.
 APP.setup = ()=>{
     Map.init('map');
     Scene.toggleScene('back');
+    APP.UI.pauseAudio('[data-bs-dismiss="modal"');
 };
 
 /* If you plan to use an update routine (executed continuously), you can place its logic here.