From 148a7545c357d3102abd0879a6bc2c0974765ab5 Mon Sep 17 00:00:00 2001 From: Devin Starks Date: Mon, 17 Apr 2017 03:01:41 -0400 Subject: [PATCH] only fires keydown cb once --- package.json | 1 + src/Main/Toolbox/Keyboard/Keys/Key/index.jsx | 12 +++++ .../Keyboard/Keys/Key/utils/keybind.js | 53 +++++++++++++++++++ src/Main/Toolbox/Keyboard/index.jsx | 2 +- 4 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 src/Main/Toolbox/Keyboard/Keys/Key/utils/keybind.js diff --git a/package.json b/package.json index f5760ee..f1688d8 100644 --- a/package.json +++ b/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", diff --git a/src/Main/Toolbox/Keyboard/Keys/Key/index.jsx b/src/Main/Toolbox/Keyboard/Keys/Key/index.jsx index 66df0aa..5e15cc9 100644 --- a/src/Main/Toolbox/Keyboard/Keys/Key/index.jsx +++ b/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("#"); } diff --git a/src/Main/Toolbox/Keyboard/Keys/Key/utils/keybind.js b/src/Main/Toolbox/Keyboard/Keys/Key/utils/keybind.js new file mode 100644 index 0000000..62a9f14 --- /dev/null +++ b/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; diff --git a/src/Main/Toolbox/Keyboard/index.jsx b/src/Main/Toolbox/Keyboard/index.jsx index 91876dd..4ef2bc3 100644 --- a/src/Main/Toolbox/Keyboard/index.jsx +++ b/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() {