Drum Machine Testing Failed

JavaScript
1

I’m working on Drum Machine project. My project seems to work fine, everything works well, however, the testing shows it failed. I couldn’t able to pass these 2 test cases:

TEST CASE :

When I click on a .drum-pad element, the audio clip contained in its child <audio> element should be triggered.

TEST CASE :

When I press the trigger key associated with each .drum-pad, the audio clip contained in its child <audio> element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string "Q", pressing the W key should trigger the drum pad which contains the string "W", etc.).

Here is my code. Please point me out what am I doing wrong in the code for my project.

import React, { useState } from 'react';
import './App.css';

function App() {

  const DRUM_NOTES = [
        {id:1,
         key:'Q',
         note:'Heater 1', source:'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'},
        {id:2,
         key:'W', note:'Heater 2', source:'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'},
        {id:3,
         key:'E', note:'Heater 3', source:'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'},
        {id:4,
         key:'A', note:'Heater 4', source:'https://s3.amazonaws.com/freecodecamp/drums/Heater-4.mp3'},
        {id:5,
         key:'S', note:'Clap', source:'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'},
        {id:6,
         key:'D', note:'Open-HH', source:'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'},
        {id:7,
         key:'Z', note:'Kick-n\'-Hat', source:'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'},
        {id:8,
         key:'X', note:'Kick', source:'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'},
        {id:9,
         key:'C', note:'Close-HH', source:'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'},
  ]; 

  const [drumNote, setDrumNote] = React.useState('');

  const playMusic = (event) => {
  try {
    console.log(DRUM_NOTES)
    const drumKeyCode = DRUM_NOTES.find((drumNote)=> {
      return(drumNote.key === event.key || drumNote.key === event.target.innerText)
    });

     console.log(drumKeyCode);

    if (drumKeyCode) {
      console.log(drumKeyCode);
      const audioSrc = document.getElementById(drumKeyCode.key);
      const drumPad = document.getElementById(drumKeyCode.id);

      console.log(audioSrc);
      console.log(drumPad);

      audioSrc.currentTime = 0;
      audioSrc.play();
      setDrumNote(drumKeyCode.note);
    }
  } catch (error) {
    console.log(error.message);
  }
}

  
  const drumTabs = DRUM_NOTES.map((drumNote)=> {
    return (
      <div className='drum-pad' id={drumNote.id} key={drumNote.key}
        onClick={(e)=> {playMusic(e)}}>
          {drumNote.key}
        <audio src={drumNote.source} className='clip' id={drumNote.key}
          key={drumNote.note} type='audio/mp4'/>
      </div>
        
    )
  });



 return(
   <div className='container-fluid d-flex justify-content-center align-items-center flex-column bg-dark'
     style={{minHeight:'100vh'}}>
       
      <div id="drum-machine" 
      className='drum-container p-2 bg-secondary row rounded-4
      d-sm-flex justify-content-around align-items-center flex-column' style={{
     minHeight:'70vh',
     minWidth:'60%',
    }}>
      <div className='col-sm-6 col-12 m-1 p-2 d-flex flex-wrap justify-content-around align-items-center'>
        <div className='drumbox d-flex justify-content-around align-items-center flex-wrap rounded-4'>
            {drumTabs}
        </div>
      </div>
      <div className='col-sm-6 col-12'>
        <h5 className='text-center' id='display'>{drumNote}</h5>
      </div>
    </div>
   </div>
 )
}

export default App;
2

I think you are likely to get more help if you can provide us with a link to the project so that we can test it without having to copy/paste and set up everything ourselves. Perhaps put it in codepen or something similar.

We are lazy by nature. Don’t make us do any work to help you :slight_smile:

3

Here is my live link - Drum-Machine - Replit

4

Look closely at the red error message:

“The <audio> element with id="A" does not play when the A .drum-pad is clicked”

The sound for the A drum pad is not working. I think you need to get a new sound for it. You can see an error in the console each time you click it.

5

Looks like nothing happens when I press keys on keyboard.

I am not sure if onClick event does the good job in terms of providing functionality for handling pressing the keys
You may wanna do research about keyboard events.

There are some issues in the console:
Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

Also, looks like one of the source audio links is broken somehow.
You may wanna test ‘A’ button functionality.

on first load of the page console gives:
GET https://s3.amazonaws.com/freecodecamp/drums/Heater-4.mp3 403 (Forbidden)

on click of ‘A’ button:
App.jsx:48 Uncaught (in promise) DOMException: The element has no supported sources.

6

ohh, right. I forgot to add this line
document.addEventListener('keydown', playMusic);

Now, it’s all passed. thank you

7

thank you, I fixed new link for A drum and it works now.

8

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