his audio request

autist/index.html

@@ -15,7 +15,18 @@
 
     <div class="main" id="main">
         <h3 id="played">No sound played. Press the button!</h3>
-        <button id="playButton">Get random sound</button>
+        <button id="sound1 playButton">Play <strong>autist</strong>
+            <audio src="wav/sound1.wav"></audio>
+        </button>
+        <button  id="sound2 playButton">Play <strong>downie</strong>
+            <audio src="wav/sound2.wav"></audio>
+        </button>
+        <button id="sound3 playButton">Play <strong>retard</strong>
+            <audio src="wav/sound3.wav" ></audio>
+        </button>
+        <button id="sound4 playButton">Play <strong>retarded autistic downie</strong>
+            <audio src="wav/sound4.wav"></audio>
+        </button>
     </div>
 
     <audio id="audio" autoplay src="" aria-hidden="true"></audio>

autist/index.js

@@ -1,29 +1,19 @@
-const sounds = {
-    autist: 'wav/sound1.wav',
-    downie: 'wav/sound2.wav',
-    retard: 'wav/sound3.wav',
-    'retarded autistic downie': 'wav/sound4.wav'
-};
+const buttons = document.querySelectorAll('button');
+
+buttons.forEach(button => {
+    const audio = button.querySelector('audio');
+    button.addEventListener('click', function() {
+        if (audio) {
+            audio.play();
+        }
+    });
+});
 
-const button = document.getElementById('playButton');
-const header = document.getElementById('played');
 
 const toggle = document.getElementById('toggle');
 const ad = document.getElementById('ad');
 let isHidden = false;
 
-button.addEventListener('click', function() {
-    const audio = document.getElementById('audio');
-    const keys = Object.keys(sounds);
-    let randKey = keys[Math.floor(Math.random() * keys.length)];
-    let randSound = sounds[randKey];
-
-    audio.src = randSound;
-    audio.play();
-
-    header.innerHTML = randKey;
-});
-
 toggle.addEventListener('click', function() {
     if (!isHidden) {
         ad.style.display = 'none';

autist/style.css

@@ -55,8 +55,8 @@ button:not(#toggle) {
     cursor: pointer;
     transition: 0.1s ease-in-out;
     padding: 10px 20px;
-    font-weight: bold;
     margin: 10px;
+
 }
 
 #toggle {