Hello,
Im trying to finish my project, first I tried doing everything so I can do what its being asked, but I didnt pay attention to the “indications” FCC gives, and now I believe Im stuck, before I erase most of it I want to know if this can still be fixed…
This is my code below on JS, html and css files are correct now, but Im only trying to fix the JS,
FCC is asking the following:
User Story #3: Within #drum-machine I can see 9 clickable drum pad elements, each with a class name of drum-pad , a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q , W , E , A , S , D , Z , X , C . The drum pads MUST be in this order.
The bad thing is that I created a Pad element, but I dont know how to show the 9 clickable drum pad inside the drum machine as they request, since pad wont let me place the unique id on each, please let me know if I can proceed with pad, or if I need to change everything on the pad.
function App(){
const audioClips = [
{
keyCode: 81,
keyTrigger: "Q",
id: "Heater-1",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
},
{
keyCode: 87,
keyTrigger: "W",
id: "Heater-2",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
},
{
keyCode: 69,
keyTrigger: "E",
id: "Heater-3",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
},
{
keyCode: 65,
keyTrigger: "A",
id: "Heater-4",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
},
{
keyCode: 83,
keyTrigger: "S",
id: "Clap",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
},
{
keyCode: 68,
keyTrigger: "D",
id: "Open-HH",
url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
},
{
keyCode: 90,
keyTrigger: "Z",
id: "Kick-n-Hat",
url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
},
{
keyCode: 88,
keyTrigger: "X",
id: "Kick",
url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
},
{
keyCode: 67,
keyTrigger: "C",
id: "Closed-HH",
url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
}
];
const [volume, setVolume] = React.useState(1);
const [recording, setRecording] = React.useState("");
const [speed, setSpeed] = React.useState(0.5);
const playRecording = () => {
let index = 0;
let recordArray = recording.split(" ");
const interval = setInterval(() => {
const audioTag = document.getElementById(recordArray[index]);
audioTag.volume = volume;
audioTag.currentTime = 0;
audioTag.play();
index++;
}, speed * 600);
setTimeout(
() => clearInterval(interval),
600 * speed * recordArray.length -1
)
};
return (<div id="drum-machine" className="bg-info min-vh-100 text-white">
<div className="text-center">
<h2>Drum Machine</h2>
{audioClips.map(clip => (
<Pad className="drum-pad" id={clip.text} key={clip.id} clip={clip} volume={volume} setRecording={setRecording}/>
))}
<br/>
<h4>Volume</h4>
<input type="range" step="0.01" onChange={(e) => setVolume(e.target.value)} value={volume} max="1.3" min="0" className="w-50" />
<h3 id="display">{recording}</h3>
{recording && (
<>
<button onClick={playRecording} className="btn btn-success">Play</button>
<button onClick={() => setRecording("")} className="btn btn-danger">Clear</button>
<br />
<h4>Speed</h4>
<input type="range" step="0.01" onChange={(e) => setSpeed(e.target.value)} value={speed} max="1.3" min="0.1" className="w-50" />
</>
)}
</div>
</div>
);
}
function Pad({ clip, volume, setRecording }){
const [active, setActive] = React.useState(false);
React.useEffect(() => {
document.addEventListener("keydown", handleKeyPress);
return () => {
document.removeEventListener("keydown", handleKeyPress);
}
}, []);
const handleKeyPress = (e) => {
if(e.keyCode === clip.keyCode) {
playSound();
}
};
const playSound = () => {
const audioTag = document.getElementById(clip.keyTrigger)
setActive(true);
setTimeout(() => setActive(false), 300);
audioTag.volume = volume;
audioTag.currentTime = 0;
audioTag.play();
setRecording(prev => prev + clip.keyTrigger + " ");
};
return (
<div onClick={playSound} className={`btn btn-secondary p-4 m-3 ${active && "btn-warning"}`}>
<audio className="clip" id={clip.keyTrigger} src={clip.url}/>
{clip.keyTrigger}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"))
