This code works (but only if I have clicked on the drum machine first):
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress)
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPress)
}
handleKeyPress(event) {
switch(event.keyCode) {
case 67: //C
case 88: //X
case 90: //Z
case 68: //D
case 83: //S
case 65: //A
case 69: //E
case 87: //W
case 81: //Q
const mySound = SA.find(element => element.keyCode === event.keyCode);
this.setState({
name: mySound.name
});
let audio = document.getElementById(mySound.keyL);
audio.play();
}
}
SA is an array of sounds:
const SA=[ //Sound Arrayconst keyToTrigger = {67:'C', 88:'X', 90:'Z', 68:'D', 83:'S', 65:'A', 69:'E', 87:'W',81:'Q'}
{keyL: "Q", url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3", name: "Heater 1", keyCode: 81},
{keyL: "W", url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3", name: "Dsc Oh", keyCode: 87},
{keyL: "E", url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3", name: "Kick 'n Hat", keyCode: 69},
{keyL: "A", url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3", name: "Cev H2", keyCode: 65},
{keyL: "S", url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3", name: "Chord 1", keyCode: 83},
{keyL: "D", url: "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3", name: "Give us a light", keyCode: 68},
{keyL: "Z", url: "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3", name: "Bld H1", keyCode: 90},
{keyL: "X", url: "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3", name: "Side stick 1", keyCode: 88},
{keyL: "C", url: "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3", name: "Brk Snr", keyCode: 67}
];
Please advise how I can press the key without first clicking the drum machine first