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