only fires keydown cb once

package.json

@@ -51,6 +51,7 @@
     "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.1",
+    "lodash": "^4.17.4",
     "mocha": "^2.5.3",
     "node-sass": "^3.13.1",
     "npm": "^4.4.4",

src/Main/Toolbox/Keyboard/Keys/Key/index.jsx

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './styles.scss';
+import keybind from './utils/keybind';
+import _ from 'lodash';
+
 
 
 class Key extends Component {
@@ -24,6 +27,11 @@ class Key extends Component {
 		this.setActive = this.setActive.bind(this);
 		this.playNote = this.playNote.bind(this);
 		this.stopNote = this.stopNote.bind(this);
+		this.relativeNote = this.relativeNote.bind(this);
+	}
+
+	componentDidMount() {
+		keybind(this.relativeNote(), this.setActive, this.setInactive);
 	}
 
 	componentDidUpdate(prevProps, prevState) {
@@ -42,6 +50,10 @@ class Key extends Component {
 		this.props.synth.triggerRelease(this.props.note);
 	}
 
+	relativeNote() {
+		return this.props.note.slice(0, -1) + this.props.octave;
+	}
+
 	isBlack(note) {
 		return this.props.note.includes("#");
 	}

src/Main/Toolbox/Keyboard/Keys/Key/utils/keybind.js

@@ -0,0 +1,53 @@
+// the number following the note name corresponds to the relative octave of the key
+const KEYMAP = {
+  'C1': 65,
+  'C#1': 87,
+  'D1': 83,
+  'D#1': 69,
+  'E1': 68,
+  'F1': 70,
+  'F#1': 84,
+  'G1': 71,
+  'G#1': 89,
+  'A1': 72,
+  'A#1': 85,
+  'B1': 74,
+  'C2': 75,
+  'C#2': 79,
+  'D2': 76,
+  'D#2': 80,
+  'E2': 186,
+  'F2': 222,
+};
+
+
+function keybind(note, trigger, release) {
+  const code = KEYMAP[note];
+
+  document.addEventListener('keydown', onKeyDown.bind(null, code, trigger));
+  document.addEventListener('keyup', onKeyUp.bind(null, code, release));
+}
+
+const keys = {};
+
+function onKeyDown(code, cb, e) {
+  const keyCode = e.which || e.keyCode;
+  const notAlreadyPlaying = !keys[keyCode];
+
+  if(keyCode === code && notAlreadyPlaying){
+    keys[keyCode] = true;
+    cb();
+  }
+}
+
+function onKeyUp(code, cb, e) {
+  const keyCode = e.which || e.keyCode;
+  const alreadyPlaying = keys[keyCode];
+
+  if(keyCode === code && alreadyPlaying){
+    keys[keyCode] = false;
+    cb();
+  }
+}
+
+export default keybind;

src/Main/Toolbox/Keyboard/index.jsx

@@ -8,7 +8,7 @@ import Keys from './keys';
 
 class Keyboard extends Component {
 	state = {
-		synth: new Tone.PolySynth().toMaster()
+		synth: new Tone.PolySynth(6).toMaster()
 	}
 
 	render() {