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')
this.animate();
setTimeout(() => this.animate(), 100);
}
}