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

JavaScript
1 
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.

2

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.

3

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!

4

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
5

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?

6

Finally completed it, thanks for your help.

7

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