Fix audio example issues

config.js

@@ -36,7 +36,6 @@ export const config = {
             popup: theater1Popup,
             coords: [45.4363, 12.3352],
             model: "teatro_san_salvador_20250926.gltf",
-            //pano: `${BASE_URI}/assets/pano/defsky-grass.jpg`,
             pano: `pano/defsky-grass.jpg`,
         },
         {
@@ -46,7 +45,6 @@ export const config = {
             popup: theater2Popup,
             coords: [45.4401, 12.3408],
             model: `SSGP.glb`,
-            //pano: `${BASE_URI}/assets/pano/defsky-grass.jpg`,
             pano: `pano/defsky-grass.jpg`,
         }
     ],

js/scene.js

@@ -15,12 +15,15 @@ Scene.UI.domParser = new DOMParser;
 Scene.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());
+    if (audio) {
-    });
+        document.querySelectorAll(triggerSelector).forEach(el => {
-    document.querySelector('.modal').addEventListener('blur', () => {
+            el.addEventListener('click', () => audio.pause());
-        audio.pause();
+        });
-    });
+        document.querySelector('.modal').addEventListener('blur', () => {
+            audio.pause();
+        });
+    }
 }
 
 /**

scenes/salvador/index.html

@@ -86,4 +86,30 @@
     <div class="aton-poweredby" >
         <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
     </div>
+
+    <!-- Info / media modal -->
+    <div class="modal fade" id="audio1" tabindex="-1" aria-labelledby="audio1" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <h2 class="fs-5 font-bold text-center">Informazioni</h2>
+                <p class="mt-2">
+                    L'aria "Che fiero costume" bla bla...
+                </p>
+                <p>
+                    Lorem ipsum dolor...
+                </p>
+                <h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
+                <audio class="w-100 p-2 mt-1" src="/a/scaenae/assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
+            </div>
+            </div>
+        </div>
+    </div>
 </body>

scenes/salvador/index.js

@@ -2,3 +2,4 @@ import Scene from "../../js/scene.js";
 import { config } from "../../config.js";
 
 Scene.openScene(config.markers.find(m => m.id === 'salvador'));
+Scene.UI.pauseAudio('[data-bs-dismiss="modal"]');