React Piano inspired by FCC Drum Machine project

React Piano inspired by FCC Drum Machine project

Hi All,

I am messing around with creating a piano with React based off the drum machine project.

Here is a link (there are no sounds connected yet, just key events and animation)

The issue I have is on a keydown event. When I hold down a key on the keyboard, the associated piano key just continually retriggers over and over until I let go of the keyboard key. I am trying to implement it that so when I hold down the key, it acts like a real piano, and won’t retrigger indefinitely.

Does anyone have any experience or ideas regarding this? I am having a hard time trying to figure it out.

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  handleKeyPress(e) {
    console.log('outside of if with keyboard keycode as ' + e.keyCode + ' vs ' + this.props.keyCode)
    if(e.keyCode == this.props.keyCode){
      console.log('IF TRIGGERED')
      setTimeout(() => this.animate(), 100);


After much trial and error, it works, and with sound!

now to add midi support…



It would be really nice if a user could actually click on the keys to play the sounds and animate the keys like pressing the applicable keys on the keyboard. Or at least list the applicable key to press somewhere on each key.



Yea that will definitely get added in the near future. I want to first PoC midi access with react. It’s a bit tricky so far. Seems like I will have to use a special midi js library on top of the midiaccess api.



Added midi, more keyboard, more keys, and clicks! (midi only works in chrome)

Although, running into some issues with the clicking. It only lets you click on the keys with characters on them, and only if you click on where the character is located.
Feedback appreciated!