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

https://codepen.io/lychenus/pen/yLYvQxe

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', 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'],
		'2': ['Chord 2', 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'],
		'3': ['Chord 3', 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'],
		'4': ['Shaker', 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'],
		'5': ['Open HH', 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'],
		'6': ['Closed HH', 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'],
		'7': ['Punchy Kick', 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'],
		'8': ['Side Stick', 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'],
		'9': ['Snare', 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3']
	},
	'Heater Kit': {
		'1': ['Heater 1', 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'],
		'2': ['Heater 2', 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'],
		'3': ['Heater 3', 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'],
		'4': ['Heater 4', 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'],
		'5': ['Clap', 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'],
		'6': ['Open HH', 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'],
		'7': ["Kick n' hat", 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'],
		'8': ['Kick', 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'],
		'9': ['Closed HH', 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3']		
	}

}

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:

render(){
	document.addEventListener("keydown", this.handleClick);
 return(
  ///
 )
}

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

handeClick(e){

 e.key

//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:

<div>
 <audio src=""></audio>
</div>

See my code: https://codepen.io/gtaypeg/pen/ZEYMOqz

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.

thanks!