Drum Machine Failing when Deployed

JavaScript
1

Running into issues when I deployed the drum machine project to get it graded. I got it working on my local development project (only issue is react would give errors due to pause() being used after my play()), but when I deployed to github to grade it, test 5, 6, and 7 started failing.

I am getting an error that’s occurring on my drum pad component Uncaught TypeError: Cannot read properties of null (reading 'play') but it’s hard to tell why it’s suddenly turning null.

Github Page (Failing): React App (innocent-traitor.github.io)

My drum pad script:

import './Drum_Pad.css';
import { useEffect } from 'react';

function DrumPad({soundID, text, audioSrc, parentCallback}) {
    useEffect(() =>  {
        const handleKeyPress = (e) => {
            const key = e.key;
            if (key === text.toLowerCase() || key.toUpperCase() === text) {
              handleClick();

            }
        };
        document.addEventListener('keydown', handleKeyPress);

        return () => {
            document.removeEventListener('keydown', handleKeyPress);
        }
    });

    const snd = document.getElementById(text);
    const playSound = () => {
        snd.play();
        snd.currentTime=0;

    }

    const handleClick = () => {
      playSound();
      parentCallback(soundID);
    }

  return (
    <div className="drum-pad-div">
      <button 
        className='drum-pad' 
        onClick={handleClick}
        id={soundID}
      >
        <audio className='clip' src={audioSrc} id={text}></audio>
        {text}
      </button>
    </div>
  );
}

export default DrumPad;
2
  • is “snd” a div element or “audio” element?
  • if its an “audio” element then are you using “imports” or “src” url correctly?

happy coding :slight_smile:

3

snd is a audio element. I pass in the src attribute by just providing it from the parent component. Here is how I pass in the attribute from the parent.

<DrumPad 
  soundID='Heater-1'
  text="Q"
  audioSrc='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  parentCallback={modifyDisplay}
/>
4
  • try using a “click” event directly instead of “getElementById”
  • or using a “ref” and access that ref from “playSound”

currently that “snd” is not containing that supposed “audio” element!! did you try troubleshoot this by looking at it in console, whether its really an audio element or not?!

happy coding :slight_smile:

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.