Build a drum machine is completed to my satisfaction yet I still receive errors

Ray3 · October 10, 2024, 6:55pm

Hi, I hope this enquiry finds you well. If anyone can tell me why my Drum Machine code still receives errors for user story 4 ( Within each .drum-pad, there should be an HTML5

    <div class="container text-center mt-5" id="drum-machine">
        <h1>Drum Machine</h1>
      <div id="display" class="mt-4" style="font-size: 24px;"></div>
        <div class="row">
            <div class="col">
               <button class="btn btn-primary drum-pad" id="q">Q<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-1.mp3' class="clip" id="A" </audio>
              </button>
            </div>
            <div class="col">
                <button class="btn btn-primary drum-pad" id="w">W<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-2.mp3' class="clip" id="W" </audio>
              </button>
            </div>
            <div class="col">
                <button class="btn btn-primary drum-pad" id="e">E<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-3.mp3' class="clip" id="E" </audio>
            </button>
            </div>
      
          <div class="col">
                <button class="btn btn-primary drum-pad" id="a">A<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-4_1.mp3' class="clip" id="A" </audio>
            </button>
            </div>
            <div class="col">
                <button class="btn btn-primary drum-pad" id="s">S<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-6.mp3' class="clip" id="S" </audio>
            </button>
            </div>
            <div class="col">
                <button class="btn btn-primary drum-pad" id="d">D<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Dsc_Oh.mp3' class="clip" id="D" </audio></button>
            </div>
          <div class="col">
                <button class="btn btn-primary drum-pad" id="z">Z<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Kick_n_Hat.mp3' class="clip" id="Z" </audio></button>
            </div>
            <div class="col">
                <button class="btn btn-primary drum-pad" id='x'>X<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/RP4_KICK_1.mp3' class="clip" id="X" </audio></button>
            </div>
            <div class="col">
                <button class="btn btn-primary drum-pad" id="c">C<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Cev_H2.mp3' class="clip" id="C" </audio></button>
            </div>
    </div>
</div>
    <script src="script.js"></script>

body {
    background-color: #f8f9fa;
  justify-content: center;
	  align-items: center;
}

.drum-pad {
    width: 100px;
    height: 100px;
    font-size: 24px;
    margin: 10px;
    
}

document.addEventListener("DOMContentLoaded", function() {
 /*   const sounds = {
        q: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-1.mp3'),
        w: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-2.mp3'),
        e: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-3.mp3'),
        a: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-4_1.mp3'),
        s: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-6.mp3'),
        d: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Dsc_Oh.mp3'),
        z: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Kick_n_Hat.mp3'),
        x: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/RP4_KICK_1.mp3'),
        c: new Audio('https://cdn.freecodecamp.org/testable-projects-fcc/audio/Cev_H2.mp3')
    };*/
  
  const display = document.getElementById('display');
  
  // Function to play sound and update display
    function playSound(/*sound*/audioElement, description) {
        /*sound*/audioElement.currentTime = 0; // Rewind to the start
        /*sound*/audioElement.play();
        display.innerText = description; // Update display text
    }
    /*document.getElementById('q').addEventListener('click', () => {
      sounds.q.currentTime = 0; // Rewind to the start
      sounds.q.play();
      playSound(sounds.q, 'Heater 1');
    });

    document.getElementById('w').addEventListener('click', () => {
        sounds.w.currentTime = 0;
        sounds.w.play();
        playSound(sounds.w,'Heater 2')
    });
 
    document.getElementById('e').addEventListener('click', () => {
        sounds.e.currentTime = 0;
        sounds.e.play();
        playSound(sounds.e, 'Heater 3');
    });
document.getElementById('a').addEventListener('click', () => {
        sounds.a.currentTime = 0; // Rewind to the start
        sounds.a.play();
        playSound(sounds.a, 'Heater 4');
    });

    document.getElementById('s').addEventListener('click', () => {
        sounds.s.currentTime = 0;
        sounds.s.play();
      playSound(sounds.s, 'Clap');
    });

    document.getElementById('d').addEventListener('click', () => {
        sounds.d.currentTime = 0;
        sounds.d.play();
      playSound(sounds.d, 'Open-HH');
    });
  document.getElementById('z').addEventListener('click', () => {
        sounds.z.currentTime = 0; // Rewind to the start
        sounds.z.play();
    playSound(sounds.z, 'Kick-n-Hat');
    });

    document.getElementById('x').addEventListener('click', () => {
        sounds.x.currentTime = 0;
        sounds.x.play();
      playSound(sounds.x, 'Kick');
    });

    document.getElementById('c').addEventListener('click', () => {
        sounds.c.currentTime = 0;
        sounds.c.play();
      playSound(sounds.c, 'Closed-HH');
    });
*/
   // Set up event listeners for each drum pad
    document.querySelectorAll('.drum-pad').forEach(pad => {
        const audio = pad.querySelector('.clip');
        const description = pad.innerText.trim(); // Get the text inside the button

        pad.addEventListener('click', () => {
            playSound(audio, description);
        });
    });
    // Play sound with keyboard keys
    document.addEventListener('keydown', (event) => {
        /*switch(event.key) {
            case 'q':
                sounds.q.currentTime = 0;
                sounds.q.play();
                playSound(sounds.q,'Heater 1')
                break;
            case 'w':
                sounds.w.currentTime = 0;
                sounds.w.play();
                playSound(sounds.w,'Heater 2')
                break;
            case 'e':
                sounds.e.currentTime = 0;
                sounds.e.play();
                playSound(sounds.e,'Heater 3')
                break;
            case 'a':
                sounds.a.currentTime = 0;
                sounds.a.play();
                playSound(sounds.a,'Heater 4')
                break;
            case 's':
                sounds.s.currentTime = 0;
                sounds.s.play();
                playSound(sounds.s,'Clap')
                break;
            case 'd':
                sounds.d.currentTime = 0;
                sounds.d.play();
                playSound(sounds.d,'Open-HH')
                break;
            case 'z':
                sounds.z.currentTime = 0;
                sounds.z.play();
                playSound(sounds.z,'Kick-n-Hat')
                break;
            case 'x':
                sounds.x.currentTime = 0;
                sounds.x.play();
                playSound(sounds.x,'Kick')
                break;
            case 'c':
                sounds.c.currentTime = 0;
                sounds.c.play();
                playSound(sounds.c,'Closed-HH')
                break;
        }*/
      const keyMap = {
        'q': document.getElementById('q').querySelector('.clip'),
        'w': document.getElementById('w').querySelector('.clip'),
        'e': document.getElementById('e').querySelector('.clip'),
        'a': document.getElementById('a').querySelector('.clip'),
        's': document.getElementById('s').querySelector('.clip'),
        'd': document.getElementById('d').querySelector('.clip'),
        'z': document.getElementById('z').querySelector('.clip'),
        'x': document.getElementById('x').querySelector('.clip'),
        'c': document.getElementById('c').querySelector('.clip'),
      };
      
      const audio = keyMap[event.key];
        if (audio) {
            const description = audio.id; // Use the id as description
            playSound(audio, description);
        }
    });
});

lasjorg · October 10, 2024, 7:14pm

Check your ids. Also you didn’t close the audio elements correctly.

Each <audio> element should have an id equal to its parent .drum-pad’s inner-text : expected ‘A’ to equal ‘Q’

<button class="btn btn-primary drum-pad" id="q">Q<audio src ='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-1.mp3' class="clip" id="A" </audio></button>

Log out event.key and run the tests.

To get timely help, it is better to post a link to something like Codepen and make sure you include the test script.

system · April 11, 2025, 7:15am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Drum machine fails and feedback Code Feedback	4	667	January 17, 2021
Front End Development Libraries Projects: Drummachine failing test 6 while functionally ok JavaScript	6	400	November 22, 2022
Can't pass drum machine test JavaScript	5	540	February 18, 2022
Help: Error in Drum Machine project	1	392	June 1, 2021
Drum Machine testing #5 & 7 difficulties JavaScript	3	759	July 24, 2022

Build a drum machine is completed to my satisfaction yet I still receive errors

Related topics