React: I don't know how to make a onKeyPress for making the audio go on by sound "Build a Drum Machine"

class Title extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "Drum Machine"
    };
  }
  render() {
    return (
      <>
        <h1 className="text-center" id="Title">
          {this.state.title}
        </h1>
        <h2 id="Slogan">
          Ready to <i id="DWord">Drum?</i>
        </h2>
      </>
    );
  }
}

class Drum extends React.Component {
  constructor(props) {
    super(props);
    this.play = this.play.bind(this);
    this.keyDown = this.keyDown.bind(this);
  }
  play(str) {
    var audio = document.getElementById(str);
    audio.play();
  }
  keyDown(str) {
    if (str == "Q") {
      "Q".play();
    } else if (str == "W") {
      "W".play();
    } else if (str == "E") {
      "E".play();
    } else if (str == "A") {
      "A".play();
    } else if (str == "S") {
      "S".play();
    } else if (str == "D") {
      "D".play();
    } else if (str == "Z") {
      "Z".play();
    } else if (str == "X") {
      "X".play();
    } else if (str == "C") {
      "C".play();
    }
  }
  render() {
    return (
      <>
        
        <Title />
        <div id="drum-machine">
          <div id="display">
            
            <button onClick={() => this.play("Q")} class="drum-pad" id="1">
              Q
              <audio
                
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
                class="clip"
                id="Q"
              />
            </button>

            <button onClick={() => this.play("W")} class="drum-pad" id="2">
              W
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
                class="clip"
                id="W"
              />
            </button>

            <button onClick={() => this.play("E")} class="drum-pad" id="3">
              E
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
                class="clip"
                id="E"
              />
            </button>

            <button onClick={() => this.play("A")} class="drum-pad" id="4">
              A
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
                class="clip"
                id="A"
              />
            </button>

            <button onClick={() => this.play("S")} class="drum-pad" id="5">
              S
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
                class="clip"
                id="S"
              />
            </button>

            <button onClick={() => this.play("D")} class="drum-pad" id="6">
              D
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
                class="clip"
                id="D"
              />
            </button>

            <button onClick={() => this.play("Z")} class="drum-pad" id="7">
              Z
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
                class="clip"
                id="Z"
              />
            </button>

            <button onClick={() => this.play("X")} class="drum-pad" id="8">
              X
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
                class="clip"
                id="X"
              />
            </button>

            <button onClick={() => this.play("C")} class="drum-pad" id="9">
              C
              <audio
                src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
                class="clip"
                id="C"
              />
            </button>
          </div>
        </div>
      </>
    );
  }
}
let node = document.getElementById("app");
ReactDOM.render(<Drum />, node);

https://codepen.io/DKPK/pen/dyNXpzN

I have tried making an input with adding the function, but it didn’t work, so I deleted it.

I tried this

<script>
  window.document.onkeyup = function(event) {
    return event.click();
  };
</script>

But it didn’t work.

I also tried this

{
      document.addEventListener("keydown", function (event) {
        return () => this.play(event.key);
      });
    }

It didn’t work.

I tap letters q, w, e, a, s, d, z, x and c. But it doesn’t work. I have the same system as onClick, but the code doesn’t play the music when I tap the keys.

Please help anyone!

https://codepen.io/Sylvant/pen/RwGmaRZ?editors=0110

this is my project. Scroll to componentDidMount and componentWillUnmount. That is where you assign event listeners, like “keydown”. I think you should be able to figure out how to put your code from there

1 Like

I got this error

Uncaught TypeError: Cannot read property ‘play’ of null

What I think is, I need to add the key I pressed to this.play() but how do you do that?

Finally completed it, thanks for your help.

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