feat(audio): add fire sound with interactive controls

Introduced a new fire sound with sliders for volume control, enhancing the user experience with more audio options. Updated HTML and JavaScript to dynamically manage the audio controls and attributions. Removed hardcoded rain slider for a more flexible solution.

index.html

@@ -11,10 +11,6 @@
         <div class="sound">
             <button id="toggle">Play / Pause</button>
         </div>
-        <div class="sound">
-            <label>Rain</label>
-            <input class="sound-slider" type="range" min="0" max="100" value="0" id="rain-slider">
-        </div>
     </div>
 
     <footer>
@@ -29,6 +25,7 @@
             <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>
         </div>
     </div>

script.js

@@ -1,9 +1,15 @@
 const audioFiles = {
     rain: new Audio('audio/rain.mp3'),
+    fire: new Audio('audio/fire.mp3'),
 };
 
 for (const audio in audioFiles) {
     audioFiles[audio].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);
 }
 
 function toggleSound() {