React Drum App works well, but 2 Tests still failing

[curious_avocado]

Despite the app working (near perfectly) well. These 2 tests still fail:

• When I click on a .drum-pad element, the audio clip contained in its child

• When I press the trigger key associated with each .drum-pad, the audio clip contained in its child

I think it has to do with how my <audio/> element is nested within <button/> but I don’t know how else to do it.

Also, handleKeyPress works well except I have to manually put focus on eact button before pressing them triggers a sound. (i.e button won’t work unless i click it first).

I’d really appreciate help on this or any fresh perspective on the problem

my live code: https://reactdrumm-by-ejiro.netlify.app/
the source code: GitHub - Ejiro-David/react-drummer

[bbsmooth]

I’m getting a syntax error on your live code version and so it doesn’t work at all.

[bbsmooth]

@curious_avocado

I think it has to do with how my <audio/> element is nested within <button/> but I don’t know how else to do it.

It has to do with the fact that you are playing the sound by creating a new Audio element. The tests want you to use play directly on the audio element in the HTML.

[curious_avocado]

please could you reply with a screenshot, it looks fine on my end.

[bbsmooth]

I’m not seeing the buttons at all. Here is the error I am getting:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data App.js:38:14

[curious_avocado]

I’ve tried to do audio.play() directly but it breaks my entire code, do you have any ideas on how else I could do it?

[curious_avocado]

I’ll fix this in a minute.

[bbsmooth]

If you want to pass all the tests then you’ll have to refactor your code. It shouldn’t take much effort.

[curious_avocado]

Fixed this problem, I made all required sound data locally available in the app.js file. I still need help with the other 2 aforementioned problems. Thank you.

[lasjorg]

As said, you have to call play on the audio element, how you want to get to them is up to you (refs or just a DOM selector).

If you attach the key handler to each button they have to have focus. One option is to attach the listener to the document instead and look at the event object you get access to inside the handler (it has info on which key was pressed).