Build Drum Machine. How to attach sound effect to a button and how to make keyboard sync with the HTML button?

Tell us what’s happening:

I tried googling, even looked at the source code given by FCC. but it is just too long, and i do not want to end up copying fcc’s source code. so here i am asking for more direction. or good examples so i can attempt to imitate and make things work.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0.

Challenge: Front End Libraries Projects - Build a Drum Machine

Link to the challenge:

I hope to help.

This I did:

I declared an object with all the urls of the sounds

const url = {
	'Smooth Piano Kit': {
		'1': ['Chord 1', ''],
		'2': ['Chord 2', ''],
		'3': ['Chord 3', ''],
		'4': ['Shaker', ''],
		'5': ['Open HH', ''],
		'6': ['Closed HH', ''],
		'7': ['Punchy Kick', ''],
		'8': ['Side Stick', ''],
		'9': ['Snare', '']
	'Heater Kit': {
		'1': ['Heater 1', ''],
		'2': ['Heater 2', ''],
		'3': ['Heater 3', ''],
		'4': ['Heater 4', ''],
		'5': ['Clap', ''],
		'6': ['Open HH', ''],
		'7': ["Kick n' hat", ''],
		'8': ['Kick', ''],
		'9': ['Closed HH', '']		


The src attribute of the audio tag is dynamically changed with the state.

	<audio className="clip" id="Q" src={this.state.actualProfile[1][1]}></audio>

The keyboard is synchronized in this way:

	document.addEventListener("keydown", this.handleClick);

With each click on the keyboard, the handleClick method is executed and you access the key pressed in this way



//A lot of code

Do not use buttons, use a div and give it the button shape, and inside the div goes the audio, like this:

 <audio src=""></audio>

See my code:

thanks. i will look over it later.

it seems for this kind of programming thing, it is impossible to build everything from ground zero and be a “genius”. everything is about imitating or copying out of something.

so as long as i am sort of understanding what is going on out of those copies, i should feel good?

1 Like

sorry i took a very quick glance since i am leaving office (and off holidays). the code is still very long i end up deleting codes/buttons to try to understand the structure more simply.

is there a simpler sample of

(1) pushing a button and playing a sound effect
(2) an example of hitting a keyboard key would synchronize hitting the HTML button?

ty for a lot of help - otherwise i see if i would delete more code so that it comes to a more easier form to understand in monday.

ty!!! have a nice weekend.

but just to say, that description already goes a long way to understand how i should write things.