Add audio playlist for Arcaena's memories; include track navigation and prevent simultaneous playback

memories/arcaena.html

@@ -18,6 +18,61 @@
       <p>
         Here lie the echoes of Arcaena's past moments, whispers, and memories.
       </p>
+
+      <div class="music-player">
+        <h3>Arcaena's Playlist</h3>
+        <audio id="dungeonSynthPlayer" controls>
+          <source src="/audio/arcaena/Electric Guest - Troubleman [3OC2aPCuzjo].mp3" type="audio/mpeg">
+          <source src="/audio/arcaena/The Drums - Money (Official Audio) [4nRX7NIrrzs].mp3" type="audio/mpeg">
+          <source src="/audio/arcaena/The Unknowing [DJoPdsGMbH8].mp3" type="audio/mpeg">
+          Your browser does not support the audio element.
+        </audio>
+        <div>
+          <button onclick="prevTrack()">Prev</button>
+          <button onclick="nextTrack()">Next</button>
+          <span id="dsTrackName"></span>
+        </div>
+      </div>
+      <script>
+        const dsTracks = [
+          {src: "/audio/arcaena/The Unknowing [DJoPdsGMbH8].mp3", name: "The Unknowing - Jfarrari"},
+          {src: "/audio/arcaena/Electric Guest - Troubleman [3OC2aPCuzjo].mp3", name: "Troubleman - Electric Guest"},
+          {src: "/audio/arcaena/The Drums - Money (Official Audio) [4nRX7NIrrzs].mp3", name: "Money - The Drums"},
+        ];
+        let dsIndex = 0;
+        const dsPlayer = document.getElementById('dungeonSynthPlayer');
+        const dsTrackName = document.getElementById('dsTrackName');
+
+        function loadDSTrack(idx) {
+          dsPlayer.src = dsTracks[idx].src;
+          dsTrackName.textContent = dsTracks[idx].name;
+          dsPlayer.play();
+        }
+
+        function nextTrack() {
+          dsIndex = (dsIndex + 1) % dsTracks.length;
+          loadDSTrack(dsIndex);
+        }
+
+        function prevTrack() {
+          dsIndex = (dsIndex - 1 + dsTracks.length) % dsTracks.length;
+          loadDSTrack(dsIndex);
+        }
+
+        dsPlayer.addEventListener('ended', nextTrack);
+        // Initialize
+        loadDSTrack(dsIndex);
+
+        // Prevent multiple audio players from playing simultaneously
+        document.addEventListener('play', function(e) {
+          const allAudio = document.querySelectorAll('audio');
+          allAudio.forEach(audio => {
+            if (audio !== e.target) {
+              audio.pause();
+            }
+          });
+        }, true);
+      </script>
     </section>
 
     <!-- Memory Entry -->