Tell us what’s happening:
Describe your issue in detail here.
What’s happening is that I can clearly hear and see that “Q” is working, but the Code Pen tester is telling me that it’s not registering the sound. How do I change my code so that the automated tester is picking up everything?
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Front End Development Libraries Projects - Build a Drum Machine
Hi.
I believe test 6 is failing because you do not have implemented the keyboard control feature.
Quoting the challenge page:
User Story #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.).
(Be advised that the test suite will feed your app uppercase keys.)
I don’t know what the keyboard control feature is, but I haven’t had to implement it for any of the other letters. I’ve only passed in an upper case Q as instructed by the assignment. When I press Q, it DOES sound and the display DOES update with the correct text. The problem is that the tester tool is saying that the audio clip isn’t playing … but it actually is.
You need to make it so that you can press the “Q” key (or any of the other keys) on your keyboard and the sound plays. Right now you only have a click handler that is listening for mouse clicks/finger touches on the buttons. You need to add a handler that listens for keypresses and then plays the sound associated with the key that is pressed. I think you would want to use the keydown event for this because you would want the sound to play as soon as the key is pressed.
The trick here is that you can’t attach this listener to any of the buttons because you want to be able to play the sound with the keyboard at any time, not just when a button has focus. So you need to attach it to an element that will be guaranteed to always get a keydown event. I would probably choose the body element.