Hello,
I have completed my Drum Machine to the point where it works fine with the UI but for some reason I cannot pass tests #5 & #6. I have now meddled around for awhile trying to pass these tests but I can’t seem to figure out why as the actual application already works. Can anyone help?
Thank You.
Link to the project tests here: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine
My code as followed:
const DrumMachine = () => {
const [display, setDisplay] = useState("Play a beat!");
const [audioId, setAudioId] = useState(AudioData[0]["id"]);
const [letter, setLetter] = useState(AudioData[0]["keyTrigger"]);
const [url, setUrl] = useState(AudioData[0]["url"]);
const [index, setIndex] = useState(0);
const [keyCode, setKeyCode] = useState(null);
const [power, setPower] = useState(true);
const audioElement = useRef();
const getAudioData = (audioIdWanted) => {
return new Promise((resolve, reject) => {
for(let i = 0; i < AudioData.length; i++){
let index = 0;
if(audioIdWanted === AudioData[i]["id"]) {
index = AudioData.indexOf(AudioData[i]);
setDisplay(AudioData[index]["id"]);
setAudioId(AudioData[index]["id"]);
setLetter(AudioData[index]["keyTrigger"]);
setUrl(AudioData[index]["url"]);
setIndex(index);
}
}
resolve();
reject("error")
})
}
const playAudioClip = () => {
const sound = audioElement.current;
sound.currentTime = 0;
setTimeout(() => {
sound.play()
}, 150);
};
const defaultLetterCheck = (defaultLetter) => defaultLetter === letter ? letter : defaultLetter;
const passPropsToAudioButton = (audioId, url) => {
let props = {
audioId: audioId,
url: url
}
return props
};
const keyClick = (e) => {
for(let i = 0; i < AudioData.length; i++) {
let index = 0;
if(e.keyCode === AudioData[i]["keyCode"]){
index = AudioData.indexOf(AudioData[i]);
getAudioData(AudioData[index]["id"]);
playAudioClip();
}
}
}
useEffect(() => {
document.addEventListener('keydown', keyClick)
return () => {
document.removeEventListener('keydown', keyClick)
}
})
return (
<div id="drum-machine">
<div id="inner-drum-machine-box">
<div className="row">
<div className="col" onClick={() => getAudioData('crash').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("Q")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col" onClick={() => getAudioData('dumpster-bottle-smash').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("W")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col" onClick={() => getAudioData('air-woosh-underwater').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("E")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col-5">
POWER BUTTON
</div>
</div>
<div className="row">
<div className="col" onClick={() => getAudioData('metal-bat-hits-baseball').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("A")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col" onClick={() => getAudioData('wood-rattle').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("S")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col" onClick={() => getAudioData('helicopter-by').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("D")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col-5">
<Display display ={display}/>
</div>
</div>
<div className="row">
<div className="col" onClick={() => getAudioData('boing').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("Z")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col" onClick={() => getAudioData('emergency-siren-short-burst').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("X")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col" onClick={() => getAudioData('swoosh').then(() => playAudioClip())}>
<AudioButton letter={defaultLetterCheck("C")} props={passPropsToAudioButton(audioId, url)} audioElement={audioElement} />
</div>
<div className="col-5">
VOLUME CONTROL
</div>
</div>
</div>
</div>
);
}
export default DrumMachine;
const AudioButton = ({ letter, props, audioElement }) => {
return (
<div>
<div id={props.audioId} className="drum-pad">
<span>{letter}</span>
<audio ref={audioElement} id={letter} className="clip" src={props.url} preload="preload"></audio>
</div>
</div>
);
}
export default AudioButton;
const AudioData = [
{
keyTrigger: 'Q',
id: 'crash',
url: 'https://actions.google.com/sounds/v1/impacts/crash.ogg',
keyCode: 81
},
{
keyTrigger: 'W',
id: 'dumpster-bottle-smash',
url: 'https://actions.google.com/sounds/v1/impacts/dumpster_bottle_smash.ogg',
keyCode: 87
},
{
keyTrigger: 'E',
id: 'air-woosh-underwater',
url: 'https://actions.google.com/sounds/v1/water/air_woosh_underwater.ogg',
keyCode: 69
},
{
keyTrigger: 'A',
id: 'metal-bat-hits-baseball',
url: 'https://actions.google.com/sounds/v1/sports/metal_bat_hits_baseball.ogg',
keyCode: 65
},
{
keyTrigger: 'S',
id: 'wood-rattle',
url: 'https://actions.google.com/sounds/v1/doors/wood_rattle.ogg',
keyCode: 83
},
{
keyTrigger: 'D',
id: 'helicopter-by',
url: 'https://actions.google.com/sounds/v1/transportation/helicopter_by.ogg',
keyCode: 68
},
{
keyTrigger: 'Z',
id: 'boing',
url: 'https://actions.google.com/sounds/v1/cartoon/cartoon_boing.ogg',
keyCode: 90
},
{
keyTrigger: 'X',
id: 'emergency-siren-short-burst',
url: 'https://actions.google.com/sounds/v1/emergency/emergency_siren_short_burst.ogg',
keyCode: 88
},
{
keyTrigger: 'C',
id: 'swoosh',
url: 'https://actions.google.com/sounds/v1/foley/swoosh.ogg',
keyCode: 67
},
]
export default AudioData;
