Tell us what’s happening:
I’m building the Drum Machine project. I finished styling the project.
And I want to pass this test:
Within each .drum-pad, there should be an HTML5 <audio> element which has a src attribute pointing to an audio clip, a class name of “clip”, and an id corresponding to the inner text of its parent .drum-pad (e.g. id=“Q”, id=“W”, id=“E” etc.).
So I don’t have any idea how to include the audio element and then play the sound.
Link to my project:
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:91.0) Gecko/20100101 Firefox/91.0
The test description basically tells you exactly how to do it. Is there something specific you don’t understand about the instructions?
Do you have any ideas on how you would do this? I’ll give you one hint. You could use the Audio play() Method to play the sound in the <audio> element. I’m assuming you have done the preceding challenges (random quote machine, markdown previewer). How did you link actions to button presses in those?
“Within each .drum-pad, there should be an HTML5 <audio> element which has a src attribute pointing to an audio clip, a class name of “clip”, and an id corresponding to the inner text of its parent .drum-pad (e.g. id=“Q”, id=“W”, id=“E” etc.).”
I’m not sure I could explain it any better without actually giving you a direct example. What part of this don’t you understand?
OK, now we are getting somewhere. In the future I recommend you start your posts being very specific like this. The more information you give us the better we can help you instead of having to go back and forth as we have been doing, trying to figure out where the problem is.
You don’t want to include the controls attribute in the <audio> tag. That adds the tiny control bar on each button you are seeing. You don’t need that since you are going to play the sound when the button is pressed. You also don’t want any of that other text in the <audio> tag. You only need what the instructions tell you to put in there:
src attribute pointing to sound clip (can be a URL)
a class name of clip
an id corresponding to the inner text of its parent .drum-pad (e.g. id=“Q”, id=“W”, id=“E” etc.).
I gave you a link to the JS function you can use. Again, I’m assuming you have done the two previous projects and know how to trigger an action when a button is pressed. But perhaps this is the first time you have used React and thus aren’t sure how to add event handlers? Here is a link to get you started.
I think you should try your best to get this working, use the googles if you need help. If after giving it your best shot you are still having problems then ask here in the forums and make sure your code sandbox is completely up-to-date so we can see what you have tried.
Also, just as an FYI. You can’t use the Audio() constructor you have to call play on the actual audio elements in the DOM (that is just the requirements and how the test works).
Yes I know how to trigger an action when a button is pressed… And also I build more projects out of freecodecamp.
But I told you. The problem is with sounds. Not the adding events handlers!!
I solve this problem.
and I have another issue.
I have a test case that did not pass yet:
#6: 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.).
As @lasjorg mentioned, this test requires a keyboard press, not a mouse click. Just like you added a click event handler on each button now you’ll want to add a handler for key presses. I’m not going to tell you exactly how/where to do that because I think you should try to figure it out on your own first (google is your best friend here).
Give it a good try and if you can’t get it working then you can come back with specific questions. Be sure to have your CodeSandbox updated to your most recent version so we can see what you have tried.
