From 3261e761fb6d29198618f2f7e5aaff7bd6bd4558 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Wed, 13 Nov 2024 16:30:06 +0100
Subject: [PATCH] feat: enhance audio handling with attribution

Audio file structures are refactored to include attribution data, which is dynamically appended to the HTML. This change centralizes the management of audio attributes and presentation, simplifying future audio feature enhancements. A new function, `updateVolumes()`, streamlines volume updates on input change events, improving code readability and maintainability.
---
 index.html |  4 +---
 script.js  | 30 ++++++++++++++++++++----------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 8233ff9..6a666c4 100644
--- a/index.html
+++ b/index.html
@@ -23,9 +23,7 @@
         <div class="modal-content">
             <span class="close-button">&times;</span>
             <h2>Audio Attributions</h2>
-            <ul>
-                <li>Rain sound: <a href="https://freesound.org/people/inchadney/sounds/52777/">Rain.wav</a> by <a href="https://freesound.org/people/inchadney/">inchadney</a> | License: <a href="https://creativecommons.org/licenses/by/4.0/">Attribution 4.0</a></li>
-                <li>Fire sound: <a href="https://freesound.org/people/CountryRoadFilms/sounds/449047/">Fire Four.wav</a> by <a href="https://freesound.org/people/CountryRoadFilms/">CountryRoadFilms</a> | License: <a href="http://creativecommons.org/licenses/by/3.0/">Attribution 3.0</a></li>
+            <ul id="audio-attribution-list">
             </ul>
         </div>
     </div>
diff --git a/script.js b/script.js
index 2c138d0..35f0d4d 100644
--- a/script.js
+++ b/script.js
@@ -1,27 +1,31 @@
 const audioFiles = {
-    rain: new Audio('audio/rain.mp3'),
-    fire: new Audio('audio/fire.mp3'),
+    rain: [new Audio('audio/rain.mp3'), '<a href="https://freesound.org/people/inchadney/sounds/52777/">Rain.wav</a> by <a href="https://freesound.org/people/inchadney/">inchadney</a> | License: <a href="https://creativecommons.org/licenses/by/4.0/">Attribution 4.0</a>'],
+    fire: [new Audio('audio/fire.mp3'), '<a href="https://freesound.org/people/CountryRoadFilms/sounds/449047/">Fire Four.wav</a> by <a href="https://freesound.org/people/CountryRoadFilms/">CountryRoadFilms</a> | License: <a href="http://creativecommons.org/licenses/by/3.0/">Attribution 3.0</a>'],
 };
 
 for (const audio in audioFiles) {
-    audioFiles[audio].loop = true;
+    audioFiles[audio][0].loop = true;
 
     const soundControl = document.createElement('div');
     soundControl.classList.add('sound');
     soundControl.innerHTML = `<label>${audio.charAt(0).toUpperCase() + audio.slice(1)}</label><input class="sound-slider" type="range" min="0" max="100" value="0" id="${audio}-slider">`;
     document.getElementById('sound-controls').appendChild(soundControl);
+
+    const attribution = document.createElement('li');
+    attribution.innerHTML = `${audio.charAt(0).toUpperCase() + audio.slice(1)} sound: ` + audioFiles[audio][1];
+    document.getElementById('audio-attribution-list').appendChild(attribution);
 }
 
 function toggleSound() {
     if (!playing) {
         for (const audio in audioFiles) {
-            audioFiles[audio].play();
+            audioFiles[audio][0].play();
             playing = true;
         }
     }
     else {
         for (const audio in audioFiles) {
-            audioFiles[audio].pause();
+            audioFiles[audio][0].pause();
             playing = false;
         }
     }
@@ -31,12 +35,16 @@ document.getElementById('toggle').addEventListener('click', toggleSound);
 
 const sliders = document.getElementsByClassName('sound-slider');
 
+function updateVolumes() {
+    for (const audio in audioFiles) {
+        const slider = document.getElementById(audio + '-slider');
+        audioFiles[audio][0].volume = slider.value / 100;
+    }
+};
+
 Array.from(sliders).forEach(slider => {
     slider.addEventListener('input', function (e) {
-        for (const audio in audioFiles) {
-            const slider = document.getElementById(audio + '-slider');
-            audioFiles[audio].volume = slider.value / 100;
-        }
+        updateVolumes();
     })
 });
 
@@ -60,4 +68,6 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
-var playing = false;
\ No newline at end of file
+var playing = false;
+
+updateVolumes();
\ No newline at end of file