So here’s my code that I am working on. This is for the drum machine project. I have successfully created the buttons and the audio file is played when I click them. I am not able to pass test no 5 in the compiler which says:
"When I click on a .drum-pad element, the audio clip contained in its child element should be triggered."
Here’s the code:
import React from "react";
import ReactDom from "react-dom";
import ReactPlayer from "react-player";
const sounds = [
{
idnum: "1",
id: "Q",
src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
},
{
idnum: "2",
id: "W",
src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
},
{
idnum: "3",
id: "E",
src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
},
{
idnum: "4",
id: "A",
src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
},
{
idnum: "5",
id: "S",
src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
},
{
idnum: "6",
id: "D",
src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
},
{
idnum: "7",
id: "Z",
src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
},
{
idnum: "8",
id: "X",
src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
},
{
idnum: "9",
id: "C",
src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
},
];
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
audioSource: "not clicked",
};
this.soundOn = this.soundOn.bind(this);
}
soundOn = (info) => {
var audio = new Audio(info.src);
audio.play();
};
render() {
const buttonData = sounds.map((info) => (
<button
className="drum-pad"
id={info["idnum"]}
onClick={() => this.soundOn(info)}
>
{info["id"]}
<audio
src={info.src}
className="clip"
id={info.id}
type="audio/mp3"
></audio>
</button>
));
return buttonData;
}
}
export default Button;
Any help would be appreciated.
Thanks!
Please login or Register to submit your answer