Passing the Audio tests for the drum pad project

1

I have been working on the drum pad project, and I have been unable to pass the audio tests. Originally, I wrote my code without the audio elements, but once I realized they were needed for the tests, I have been trying to add them, but I haven’t been able to get the tests to pass. Also, test #7 originally passed for me, but once I added the html audio portions it no longer passes, either. Does anyone have any suggestions?

2

Hello there,

The tests’ error messages are very helpful:

Each <audio> element should have an id equal to its parent .drum-pad’s inner-text : expected ‘Q’ to equal ‘QQ’

Have a look at what you have:

<div onClick={() => this.executeAudio(0)} className="drum-pad" id="q">Q
            <audio src={audioFiles[0][1]} id="Q" className="clip"></audio>
            <button onClick={() => newPlayAudio("Q")} className="drum-pad" id="Q1">Q</button>
          </div>

Also, as an aside, you are not taking advantage of the fact that this app is written using React. Specifically, have a review of the principles in this lesson about dynamically rendering components/elements

Hope this helps

3

I just don’t understand why the audio element isn’t triggering. The sounds are playing, but no matter what I do, it apparently doesn’t trigger the audio element.

I am also still confused about test #7. I am displaying the name in an element with id=“display”, and it changes depending on which button is pressed, so I don’t know why that one isn’t working.