Drum Machine Project 3

[jeannemcham]

I am really struggling with this Drum Machine. Have followed 2 different videos and somehow I cannot get to the point where the sounds are coming out. Here is a link to my code: https://codepen.io/jeannemcham/pen/RwoEPvL.

Here is my JS Code:
import jsx from “https://cdn.skypack.dev/jsx@0.9.89”;
const projectName = ‘drum-machine’;
const sounds = [{
key: ‘Q’,
keycode: 81,
id: ‘Open HH’,
mp3: ‘s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.//mp3’
}, {
key: ‘W’,
keycode: 87,
id: ‘Closed-HH’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3’
}, {
key: ‘E’,
keycode: 69,
id: ‘Kick-and-Hat’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3’
}, {
key: ‘A’,
keycode: 65,
id: ‘Punchy-Kick’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3’
}, {
key: ‘S’,
keycode: 83,
id: ‘Kick’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3’
}, {
key: ‘D’,
keycode: 68,
id: ‘Snare’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3’
}, {
key: ‘Z’,
keycode: 90,
id: ‘Side-Stick’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3’
}, {
key: ‘X’,
keycode: 88,
id: ‘Clap’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3’
}, {
key: ‘C’,
keycode: 67,
id: ‘Shaker’,
mp3: ‘https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3’
}];

const App = () => /#PURE/React.createElement(“div”, {
id: “display”,
className: “display”
}, sounds.map((sound, idx) => /#PURE/React.createElement(Box, {
text: sound.key,
key: idx,
audio: sound.mp3
})));

class Box extends React.Component {
constructor(props) {
super(props);

this.audio = React.createRef();

}

playSound() {
console.log(this.audio.current);
this.audio.current.play();
}

render() {
const {
text,
audio
} = this.props;
return /#PURE/React.createElement(“div”, {
className: “box”,
onClick: this.playSound
}, text, /#PURE/React.createElement(“audio”, {
ref: this.audio,
src: audio,
className: “clip”,
id: text
}));
}

}
ReactDOM.render( /#PURE/React.createElement(App, null), document.getElementById(“drum-machine”));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

freeCodeCamp.org