Drum Machine Test #6 Incorrectly Fails / User Story Inaccurate

Tell us what’s happening:
Test # 6 fails despite the app fulfilling the user story. I press the key, and the sound plays.

I’ve seen many other posts on this, but nothing works… Checking the event’s keyCode instead of key doesn’t help. I convert to upper case for comparison, so that’s not an issue.

After running the tests, in console I see the errors:

index.js:1 Uncaught Error: The error you provided does not contain a stack trace.

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Neither of these errors occur when I use the app.

It seems to me either the test suite needs to be fixed, or the description for User Story # 6 needs to be changed to accurately describe what is actually being tested.

Your code so far
Repo: https://github.com/lraulin/fcc-drum-machine/
Deployed: https://lraulin.github.io/fcc-drum-machine/

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

I’m not giving you a definitive answer here but I am noticing some issues with your sounds. When I use the mouse to consecutively click a button it only plays every other click (1st click on Q plays, 2nd click on Q no sound, 3rd click on Q plays, 4th click on Q no sound, etc…)

Using the keyboard to play a sound causes the sound to play twice with one key press (press Q and hold down, plays sound, let up on Q, plays sound a second time).

I’d clean these issues up first and then see if you aren’t passing the test.

1 Like

I’m seeing the same issues as @bbsmooth.

Further, I had similar problems passing the same test, with the same DOM exception on the console. In the end, I had (very subtly) messed up handling the case on the keys when I thought I had the key codes and cases correct. Once I fixed that, all the tests passed and the DOM exception went away.

However, I don’t think that DOM exception is the cause of your problems. It still appears in my pomodoro clock project and that project passes all its tests, but it only appears when play() and pause() are used close together during the tests.

1 Like

Thanks for the suggestions! I fixed those problems, but am still getting the same results.

I set currentTime = 0 so it plays every time you click, and I have handleKeyDown remove the event listener, and an event that adds it back on keyUp, so if you hold the key down, it just plays once.

Incidentally, this drum machine has both of those issues, but still passes the tests. One thing I noticed is that it handles the keypress by triggering a click on the button HTMLElement. I tried that, but it made no difference. It also checks event.key…I tried that, and also String.fromCharCode(event.keyCode)…both work, but the test fails either way.

Makes no difference whether the event is keypress or keydown.

PS: I already claimed the certificate, since it doesn’t check if the tests pass, and I’m still confident that I satisfied the minimum requirements, and it’s a quirk of how the tests are written, but it still would be nice to know what’s going on.


I got it to pass the tests, but I’m still not sure what the problem was.

I simplified my code by using document.findElementById instead of passing refs all over the place… Maybe the use of refs had something to do with it?

And I used audio.play() as a promise, as described here. But I still get “DOMException: The play() request was interrupted by a call to pause().” when the tests run… So the tests are calling pause on the audio element? There’s no “pause” anywhere in my code, and I’ve never seen the error when I use my app manually. But now the error is caught, and it works and the tests pass, so I guess it doesn’t matter.

But the other example I saw that passed the tests didn’t use play as a promise, it just called it like I was. So… I don’t know.