DrumMachine tips and advices

I’m kind a in the middle of building of a DrumMachine in React so if you’re kind enough to give me feedback on my progress so far.
More specifically, should i use

document.getElementById(myID).play();

and

document.getElementById(myID[0]).play();

to play these sounds? Should i change approach and how?
PS: At later time i’ll i split this up in components and rest, but for now i’m trying to make it at least functional.
This is my pen.

Should refs be in parent or a child component? If its on child and there’s no ‘controls’ attribute in audio element, it cannot be clicked on it(child)…

Can you check it now?
These are the lines(new) that are responsible for playing sound. PS: I only tried this with ‘handleClick’ function. Didn’t implemented on keypress(yet) though …

let myPos = Array.prototype.indexOf.call(e.target.parentNode.childNodes, e.target);
this.myRef.current.children[myPos].children[0].play();

Disregard previous.

Anyroad, keypress function is up and running, using refs of audio tag and not document.getElementBy’s. Need to make something for handleClick also. Check my pen in my post for it.

Codepen example is updated. Now both, handleClick and keyPress are rewritten to utilize refs.

Just did it, it all works, it passes all the tests. Only left is to split to components. Word of caution to all whom are doing this exercise:
It should be

<audio id="Q" className="clip">
    <source src="someFile.mp3" type="audio/mp3">
</audio>

instead it’s

<audio id="Q"  className="clip"  src="someFile.mp3"/>

or if you want to display error message in the case browser doesn’t support audio

<audio id="Q"  className="clip" src="someFile.mp3">
	Your browser doesn't support this audio format.
</audio>

For what ever reason when you put source tag, it show an error like there’s no src attribute … And there isn’t, since test script searches for src attribute in audio tag not in source subtag.

1 Like

I know I’m not the only one who hit that wall!
Thank you!