added new ambient sounds.

index.html

@@ -699,6 +699,33 @@ <h4 class="modal-title custom-modal-title">
                 <input type="range" min="0" max="100" value="20" class="volume-slider">
               </div>
             </div>
+            <div class="sound-button" data-sound="keyboard">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-keyboard h-4 w-4 shrink-0"><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></svg>
+                <span>Keyboard</span>
+              </div>
+              <div class="volume-control">
+                <input type="range" min="0" max="100" value="15" class="volume-slider">
+              </div>
+            </div>
+            <div class="sound-button" data-sound="wind-chimes">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind h-4 w-4 shrink-0"><path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path><path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path><path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path></svg>
+                <span>Wind Chimes</span>
+              </div>
+              <div class="volume-control">
+                <input type="range" min="0" max="100" value="20" class="volume-slider">
+              </div>
+            </div>
+            <div class="sound-button" data-sound="clock">
+              <div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4 shrink-0"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+                <span>Clock</span>
+              </div>
+              <div class="volume-control">
+                <input type="range" min="0" max="100" value="30" class="volume-slider">
+              </div>
+            </div>
           </div>
         </div>
         <div class="modal-footer">

js/white-noise-player.js

@@ -54,6 +54,24 @@ class WhiteNoisePlayer {
                 audio: null,
                 playing: false,
                 loading: false
+            },
+            'keyboard': {
+                url: 'sounds/keyboard.mp3',
+                audio: null,
+                playing: false,
+                loading: false
+            },
+            'wind-chimes': {
+                url: 'sounds/wind-chimes.mp3',
+                audio: null,
+                playing: false,
+                loading: false
+            },
+            'clock': {
+                url: 'sounds/clock.mp3',
+                audio: null,
+                playing: false,
+                loading: false
             }
         };