Drum machine works, but only in Firefox, not Chrome?

Does anyone have any suggestions for how to debug?

( I decided to do all front end projects in JS, then again with a framework to ensure I digest the basic JS involved, although React has been fun, so far)

I got the drum machine working with vanilla JS (yay!) , but it doesn’t pass tests, 4, 5, 6, and 7.

https://codepen.io/dante-inferno/full/wvKZPRQ

Playback works fine in Firefox. But when I tried to use the drum machine in Chrome, no sound plays at all. In the code pen console, the playClip() function fires, but no clip gets played. In the Chrome console, I only see this when I try to press one of the keys:

Uncaught (in promise) DOMException: The element has no supported sources.
(anonymous) @ pen.js:12

Can anyone help me understand what is happening? I’ve researched the audio element, the event bubbling, and keydown methods, but to no avail.

(fingers crossed)

Guess it’s your Firefox config (see), generally the link you provided would open download dialog, and is not a correct audio source(see error message), try using link to actual file instead like http://www.drumsoundz.com/Bassdrum-01.wav

Thanks for the suggestion, I will definitely doublecheck my links to the sound clips and see if I can link directly to the clip file itself.

I decided to start from scratch and really understand the steps so that I can get all the error messages (FCC) to go away.

It’s odd that the playback works in Firefox but not in Chrome, though.

What’s I’m struggling most with at the most is the click event on the buttons. The keydown event works, but I haven’t yet figured out the way to call the playblack on a click. I’ll post my solution when i do figure it out.

Try the clip link I gave you just for testing, the solution is closer than you think. Here’s a little something to read about event delegation.

With click it’s much easier, you get information about the element you cliked in event.target, try to get audio element, and just .play() it.

Thanks for the tips and link to the Event Delegation docs, @Annestezia. Really helpful.

Could I ask one favour of you? Now my drum machine passes all the tests and I will spend some time making it look nicer and have some css animations (simple) for when you click or keydown on the drum pad, but I am getting an error outside the test suite that I’m not having any luck debugging.

Type error:  CLICKED_BUTTON is null  line 22

This doesn’t make sense to me, since CLICKED_BUTTON is inside the playClick() function and fires when there’s a click. I also did a check to make sure that the function ignores clicks that are not on a button.

Surely when the DOM loads there’s no click event?

Thanks again for the tip on directly linked to a sound file, instead of a download path! I doubt I would have realized that without your tip. :smile:

In your code CLICKED_BUTTON is not a button, but audio element.
You want to click button and play it’s child audio(that is what tests expect from you too, so just make sure that your event target (= element that triggers event) is button), and you’re done :wink:
upd: take closer look at how target tag is filtered

Hmm I might be wrong here but think that error message comes from the test, it’s expecting ‘BUTTON’ as event target (this makes sense), and you give it ‘AUDIO’

If you don’t fire click event somehow it won’t start

Btw the link I gave you is not documentation, it’s a cool tutorial :slight_smile:

And maybe you don’t need to listen clicks on the whole window, you expect them only on buttons within #display-grid, just saying

Sweet! I’ll work through your suggestions - and thanks for not giving away the answer too easily. :wink:

Yeah, you were right. I’m trying to remember why I opted to select the event.target.firstChild for the button click in the first place.

So I changed the buttonCLick to event.target and the play() method to run from:

CLICKED_BUTTON.firstChild.play();

But I wonder if there is still a better way.

Listening for clicks from just the grid element? I didn’t know you could do that. That fixes a lot of problems I think and I should be able to simplify my code? I’ll try it.

I’ll look at it in more detail. I still feel I have much to learn about events/bubbling/and more clean ways of selecting elements.

I pulled out the check for the type of element and changed it so that the EventListener is on the grid not the window. Looks better!

When I changed the EventListener to the grid instead of the window, I’d get an error that .play() is not a function (on the button). So I had to revert back to the window for the keydown.

I cleaned up the design a bit and added some little animations. Let me know what you think!

Well done! What a pleasure to play it :smiley:

You’ve got two variables with the same value CLICKED_BUTTON and DRUM_CLICK, you can DRY it

The error is because you

with window it’s the same

You’re welcome :slight_smile: You literally were couple of steps away, I’m happy that you put some effort into understanding your code :wink: And made me learn some things too

Perfectionist stuff: currentTime=0 not working with click, because you run it on target, using generic names like target, audio would be better for readability, you wouldn’t guess what’s in a variable

Good luck !