Drum Machine -Can't pass tests #5 & #6

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;

If it makes it any easier to answer this question, I transferred my code to a codepen.

Also, since this original post I have changed my code to try to solve this issue but it still does not work.

Also, I have gone through many of the forum posts related to this project and I still could not come to a solution.

https://codepen.io/rundownx2020/pen/eYWERVK

Remove the setTimeout from the play code.

Edit: You need to work a bit on the responsiveness of the app as well.

Thank you, this passed the tests! Do you know why?

Edit: You need to work a bit on the responsiveness of the app as well.
Care to elaborate a bit?

This is what I am seeing on my end when I narrow the browser as far as it can go.

Screen Shot 2021-07-22 at 5.42.22 AM

Hope that helps!

Ok, thank you. I see what you mean.

I’m guessing it messes with the timing just enough to make the tests fail.

Besides, the setTimeout delay value is in milliseconds so putting 100 is really not going to have much of a useful effect in your case.