Front End Developer Project - Drum Machine

JavaScript
1

Hi Guys, I have built this Drum Machine Project but despite trying hard, I haven’t been able to pass test #6.
Please help me.
Sound plays by clicking on key but I can’t figure out ways to play sound by clicking on the corresponding buttons.

Here is my project Drum Machine and by clicking on the source code, you can see my code on github repo.

Please have a look at my code and suggest me ways that can help me pass test #6 which gives this error ===> When I press the trigger key associated with each .drum-pad, the audio clip contained in its child

1 Like
2

Ahh, forgive me, I didn’t see the “source code” link. I’ll get back to you.

1 Like
3

@bbsmooth Thanks for your response Sir. here is the link to my codes. croy47/drum_machine (github.com)

I had provided link to my code on my drum machine project that is hosted on netlify to show that it gives one error.

If you click on the “Source Code” on Drum Machine (drum-machine-bychandan.netlify.app), it will redirect you to the github page that has all the codes.

4

So it’s what I initially thought, you don’t have an event listener that listens for the keypress event. A simple way to do this is to add it to the body using addEventListener. And then you can call your playDrum function when it catches a key that is supposed to play a sound.

2 Likes
5

I tried it in my code on vscode but I didn’t succeed.can you suggest me how could i add it to buttons and then catch it when it’s pressed. I have spent a few hours and didn’t succeed. It could be something easy and I am sorry but I am unable to do it, sir.

6

So you aren’t adding it to buttons, you will want to add an event listener to the body:

document.body.addEventListener('keydown', listener);

where listener is the function you want to call each time the keydown event is caught. I would probably create a new function for the listener that verifies that the keydown is for a key that should play a sound and then calls playDrum. Also, remember that the listener function is automatically going to be passed the event object as the first argument, which will allow you to determine which key was pressed.

P.S. I am not a React expert, so there might be a more “official” React way for adding a keydown listener to the body. Maybe one of the React gurus around here will chime in.

1 Like
7

I used onkeypress, onkeydown events on button element and then called playdrum but that didn’t work. One Question–> why can’t I add onkeypress/onkeydown to the button element?

8

Because you want to catch the keydown event no matter what element is currently the active element on the page. The keydown event will bubble up to the body, so if you add the event listener to the body then you will always catch every keydown event no matter where it originates from. Adding the event listener to the buttons would mean that the user would have to Tab to a button first in order to make it the active element before you could play a sound with the keyboard.

2 Likes
10

After completing JS course, You can learn React which is a JavaScript Library. After that, you get to make this project.

It is one of the projects in Front End Development Course.

11

Sir, while I know your solution is correct. Unfortunately, I simply can’t find ways to implement this. I have been trying for two hours now and I am unable to do it. Can you please write code that works in this situation. I tried useEffect and all sorts of things but I maybe missing something. Once I see it, It will be easy for me.

12

Yes, I think useEffect is the way to go here as that will allow you to add the event listener on the body just once. Since you are going to use it to call playDrum I’d add this in Context.js. I’m not going to write the exact code for you, that would take the fun out of it.

My suggestion, don’t worry about getting this working 100% right away. Start by getting the event listener working. Add a console.log in the listener function so you can verify that it is catching the keydown events. Then filter out all but the nine keys you want to catch. Then you can work on calling playDrum.

After you have tried this, if you are still having problems, then update your github repo with the current code you are trying and we can look at it to give you more hints.

13

Hi, I have been trying to complete Drum Machine Project which is one of the 5 Front-End Developer Project on FCC.

You can see my project here =>

Drum Machine (drum-machine-bychandan.netlify.app)

By Clicking on the source code, You can see the source code of this project.

Problem => You can see that my project only passes 7 of the 8 tests.

Test #6 => When I press the trigger key associated with each .drum-pad, the audio clip contained in its child

Here I have to add the ‘keydown’ eventListener on the document object and then capture it and if the key matches the drum-pad key, a function should trigger the corresponding sound.

I tried everything I could and despite my efforts, I couldn’t do that.

React/ JavaScript Developers are requested to help me solve this challenge.

Thanks for your time.

Source Code of my Project - > croy47/drum_machine (github.com)

14

I have moved your duplicate topic over to this original thread.

15

Here is the sandBox link to the project. DrumMachine - CodeSandbox

1 Like
16

Sir, Thanks for not giving the straight answer and only guiding me through it.

I have solved this problem now.

Adding following code to ClickablePad.js component did solve the problem. Now, I can sleep.

useEffect(() => {
    document.addEventListener("keydown", (e) => {
      let keyPressed = e.key.toUpperCase();
      let sound = document.getElementById(keyPressed);
      if (sound) {
        let name = sound.parentNode.id;
        playDrum(name, sound.id, power, volume);
      } else {
        alert("you pressed a wrong key");
      }
    });
  }, []);
17

Awesome. I knew you would get it soon. Congrats.

2 Likes
18

Thanks a lot! It would not have been possible without your valuable suggestion though. Gracious!

19

Here is the updated link of the project that is finally solved. Drum Machine (drum-machine-bychandan.netlify.app)

While I did manage to build this project, Please have a look at my source codes and if you could give your valuable feedback on anything you think could improve the way I write code, it would be very helpful.

Thanks a lot for your time.

20

Hey @croy4744, just a few things to point out:

  • You don’t want to show an alert anytime the user doesn’t hit one of the nine keys because they may be using the keyboard to navigate your page and thus they will get that alert for everything they do. For example, in order to adjust the volume I have to Tab to the volume control and I am getting the alert everytime I hit the Tab key. I think you just want to quietly ignore the other keys.

  • Speaking of the volume control, in my Firefox the range input slider is twice as wide as the red box.

  • The power button needs to have the text “power” in it (for accessibility). You can visually hide the text so it doesn’t show on the page (but is still there for assistive technology such as screen readers).

  • The volume control technically needs a <label>.

  • The bank toggle is not accessible to keyboard users because you are using <div>s instead of a checkbox or button. There are plenty of examples of how to build an accessible toggle if you google it. Always remember to test everything you build with the keyboard only to make sure you can do everything with the keyboard.

1 Like
21

Thanks for your detailed reviews and I have incorporated most of the changes you suggested except for that accessible toggle button. Can you please have a look again and give me your feedback.