diff --git a/src/css/main.css b/src/css/main.css
index 0b745de..0621b2b 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -5,30 +5,7 @@
 @import "ui/toolbars.css";
 @import "ui/contextmenu.css";
 @import "ui/control_panel.css";
-@import "themes/theme.css";
-
-:root {
-  --m-0: var(--dark0);
-  --m-1: var(--dark3);
-  --m-2: var(--dark1);
-  --ma: var(--mid1);
-  --ma-hover: var(--mid3);
-  --ma-select: var(--light1);
-
-  --track-col-1: var(--blue);
-  --track-col-2: var(--purple);
-  --track-col-3: var(--red);
-  --track-col-4: var(--orange);
-  --track-col-5: var(--yellow);
-
-  --piano-white: var(--mid1);
-  --piano-white-hover: var(--mid3);
-  --piano-black: var(--dark0);
-  --piano-black-hover: var(--dark1);
-
-  --cm-bg: var(--light1);
-  --cm-hover: var(--light0);
-}
+@import "themes/default_dark.css";
 
 html, body {
   scroll-behavior: smooth;
@@ -36,6 +13,15 @@ html, body {
   user-select: none;
 }
 
+body {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  flex-direction: column;
+  background-color: var(--window-bg);
+  color: var(--generic-text);
+}
+
 * {
   box-sizing: border-box;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -45,57 +31,51 @@ html, body {
   --t: calc(1rem + 4px);
   width: var(--t);
   height: var(--t);
-  background-color: var(--m-1);
+  background-color: var(--scrollbar-bg);
 }
 
- *::-webkit-scrollbar-track {
+*::-webkit-scrollbar-track {
   border-radius: 1rem;
-  background-color: var(--m-0);
-  border: 2px solid var(--m-1);
- }
+  background-color: var(--scrollbar-track);
+  border: 2px solid var(--scrollbar-bg);
+}
 
 *::-webkit-scrollbar-thumb {
   --t: calc(1rem + 4px);
   width: var(--t);
   height: var(--t);
-  box-shadow: inset 0 0 1rem 1rem var(--ma);
+  color: var(--scrollbar-thumb);
+  box-shadow: inset 0 0 1rem 1rem;
   border: solid 0.25rem transparent;
   border-radius: 2rem;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  box-shadow: inset 0 0 1rem 1rem var(--ma-hover);
+  color: var(--scrollbar-thumb-hover);
+  box-shadow: inset 0 0 1rem 1rem;
 }
 
 *::-webkit-scrollbar-thumb:active {
-  box-shadow: inset 0 0 1rem 1rem var(--ma-select);
+  color: var(--scrollbar-thumb-active);
+  box-shadow: inset 0 0 1rem 1rem;
 }
 
 *::-webkit-scrollbar-corner {
-  background-color: var(--m-1);
-}
-
-body {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  flex-direction: column;
-  background-color: var(--m-0);
-  color: var(--ma);
+  background-color: var(--scrollbar-bg);
 }
 
 a {
-  color: var(--ma);
+  color: var(--generic-link);
   text-decoration: none;
 }
 
 a:hover {
-  color: var(--ma-hover);
+  color: var(--generic-link-hover);
   text-decoration: underline;
 }
 
-a:focus {
-  color: var(--ma-select);
+a:active {
+  color: var(--generic-link-active);
 }
 
 input[type=button].large {
@@ -113,8 +93,8 @@ input[type=button].small {
 input[type=button] {
   width: 3.5rem;
   height: 2rem;
-  background-color: var(--ma);
-  color: var(--m-0);
+  background-color: var(--generic-button);
+  color: var(--generic-button-text);
   font-size: 1rem;
   border-radius: 0.25rem;
   border: none;
@@ -122,57 +102,54 @@ input[type=button] {
 }
 
 input[type=button]:hover {
-  background-color: var(--ma-hover);
+  background-color: var(--generic-button-hover);
   cursor: pointer;
 }
 
 input[type=button]:active {
-  background-color: var(--ma-select);
-}
-
-input[type=range] {
-  display: none;
+  background-color: var(--generic-button-active);
 }
 
 input[type=text], input[type=number] {
   line-height: 1rem;
   border-radius: 0.25rem;
   padding: 0;
-  background-color: transparent;
-  color: var(--ma);
-  border-color: transparent transparent var(--ma);
+  background-color: var(--generic-textinput-bg);
+  color: var(--generic-textinput-text);
+  border-color: var(--generic-textinput-bg) var(--generic-textinput-bg) var(--generic-textinput-underline);
   border-style: solid;
   text-overflow: ellipsis;
 }
 
 input[type=text]::-webkit-input-placeholder {
-  color: var(--ma);
+  color: var(--generic-textinput-placeholder);
 }
 
 input[type=text]:hover::-webkit-input-placeholder {
-  color: var(--ma-hover);
+  color: var(--generic-textinput-placeholder-hover);
 }
 
 input[type=text]:focus::-webkit-input-placeholder {
-  color: transparent;
+  color: var(--generic-textinput-placeholder-active);
 }
 
 input[type=text]:hover, input[type=number]:hover {
-  color: var(--ma-hover);
-  border-color: transparent transparent var(--ma-hover);
+  background-color: var(--generic-textinput-bg-hover);
+  color: var(--generic-textinput-text-hover);
+  border-color: transparent transparent var(--generic-textinput-underline-hover);
 }
 
 input[type=text]:focus, input[type=number]:focus {
-  background-color: var(--ma-select);
-  border-color: var(--ma-select);
+  background-color: var(--generic-textinput-bg-active);
+  border-color: var(--generic-textinput-underline-active);
   outline: none;
-  color: var(--m-0);
+  color: var(--generic-textinput-text-active);
 }
 
 .slider {
   cursor: pointer;
   position: relative;
-  background-color: var(--m-0);
+  background-color: var(--slider-track);
   border-radius: 100rem;
   min-height: 1rem;
   min-width: 1rem;
@@ -180,22 +157,22 @@ input[type=text]:focus, input[type=number]:focus {
 
 .slider.vertical {
   height: 100%;
-  border-top: 1rem solid var(--m-0);
+  border-top: 1rem solid var(--slider-track);
 }
 
 .slider:not(.vertical) {
   width: 100%;
-  border-right: 1rem solid var(--m-0);
+  border-right: 1rem solid var(--slider-track);
 }
 
 .slider > div {
   position: absolute;
   box-sizing: border-box;
-  background-color: var(--ma);
+  background-color: var(--slider-thumb);
   height: 100%;
   width: 1rem;
   border-radius: 100rem;
-  border: 2px solid var(--m-0);
+  border: 2px solid var(--slider-track);
 }
 
 .slider.vertical > div {
@@ -204,9 +181,9 @@ input[type=text]:focus, input[type=number]:focus {
 }
 
 .slider > div:hover {
-  background-color: var(--ma-hover);
+  background-color: var(--slider-thumb-hover);
 }
 
-.slider > div:focus {
-  background-color: var(--ma-select);
+.slider > div:active {
+  background-color: var(--slider-thumb-active);
 }
\ No newline at end of file
diff --git a/src/css/modules/module_generic.css b/src/css/modules/module_generic.css
index f0b5c44..900b8c0 100644
--- a/src/css/modules/module_generic.css
+++ b/src/css/modules/module_generic.css
@@ -2,12 +2,12 @@
   display: flex;
   padding: 3px;
   border-radius: 0.25rem;
-  background-color: var(--m-1);
+  background-color: var(--generic-module-frame);
 }
 
 .module > * {
   margin-left: 3px;
-  background-color: var(--m-0);
+  background-color: var(--generic-module-bg);
 }
 
 .module > *:first-child {
diff --git a/src/css/modules/module_keyboard.css b/src/css/modules/module_keyboard.css
index 2e00dcd..d66ed8a 100644
--- a/src/css/modules/module_keyboard.css
+++ b/src/css/modules/module_keyboard.css
@@ -2,6 +2,51 @@
   display: flex;
   height: 10rem;
   min-height: 7rem;
+  background-color: var(--keyboard-frame);
+  color: var(--keyboard-text);
+}
+
+#keyboard ::-webkit-scrollbar {
+  background-color: var(--keyboard-scrollbar-bg);
+}
+
+#keyboard ::-webkit-scrollbar-track {
+  background-color: var(--keyboard-scrollbar-track);
+  border-color: var(--keyboard-scrollbar-bg);
+}
+
+#keyboard ::-webkit-scrollbar-thumb {
+  color: var(--keyboard-scrollbar-thumb)
+}
+
+#keyboard ::-webkit-scrollbar-thumb:hover {
+  color: var(--keyboard-scrollbar-thumb-hover);
+}
+
+#keyboard ::-webkit-scrollbar-thumb:active {
+  color: var(--keyboard-scrollbar-thumb-active);
+}
+
+#keyboard ::-webkit-scrollbar-corner {
+  background-color: var(--keyboard-scrollbar-bg);
+}
+
+#keyboard .slider {
+  background-color: var(--keyboard-slider-track);
+  border-color: var(--keyboard-slider-track);
+}
+
+#keyboard .slider > div {
+  background-color: var(--keyboard-slider-thumb);
+  border-color: var(--keyboard-slider-track);
+}
+
+#keyboard .slider > div:hover {
+  background-color: var(--keyboard-scrollbar-thumb-hover);
+}
+
+#keyboard .slider > div:active {
+  background-color: var(--keyboard-scrollbar-thumb-active);
 }
 
 .kbwheel {
@@ -20,15 +65,6 @@
   letter-spacing: 0.2rem;
 }
 
-.kbwheel input {
-  writing-mode: vertical-lr;
-  height: 100%;
-  width: 2rem;
-  margin: 0;
-  transform: rotate(90deg);
-  transform-origin: left;
-}
-
 #keys {
   display: flex;
   height: 100%;
@@ -37,6 +73,7 @@
   overflow-y: hidden;
   user-select: none;
   padding-bottom: 0.25rem;
+  background-color: var(--keyboard-bg);
 }
 
 #keys :first-child {
@@ -51,7 +88,7 @@
   display: block;
   border-width: 2px 1px 1px;
   border-style: solid;
-  border-color: var(--m-0);
+  border-color: var(--keyboard-bg);
   border-radius: 0rem 0rem 0.4rem 0.4rem;
   user-select: none;
   cursor: pointer;
@@ -66,13 +103,13 @@
   flex-grow: 1;
   flex-basis: 0px;
   height: 100%;
-  background-color: var(--piano-white);
-  color: var(--m-0);
+  background-color: var(--keyboard-whitekey);
+  color: var(--keyboard-whitekey-text);
   font-weight: bolder;
 }
 
 #keys .white:hover {
-  background-color: var(--piano-white-hover);
+  background-color: var(--keyboard-whitekey-hover);
 }
 
 #keys .black {
@@ -82,13 +119,17 @@
   */
   border-width: 2px;
   z-index: 1;
-  background-color: var(--piano-black);
+  background-color: var(--keyboard-blackkey);
 }
 
 #keys .black:hover {
-  background-color: var(--piano-black-hover);
+  background-color: var(--keyboard-blackkey-hover);
+}
+
+#keys:active .white:hover {
+  background-color: var(--keyboard-whitekey-active)
 }
 
-#keys:active .white:hover, #keys:active .black:hover {
-  background-color: var(--ma-select);
+#keys:active .black:hover {
+  background-color: var(--keyboard-blackkey-active);
 }
\ No newline at end of file
diff --git a/src/css/modules/module_node_editor.css b/src/css/modules/module_node_editor.css
index fcbb47e..68ffd78 100644
--- a/src/css/modules/module_node_editor.css
+++ b/src/css/modules/module_node_editor.css
@@ -3,6 +3,32 @@
   grid-row: 2;
   display: flex;
   flex-flow: column nowrap;
+  background-color: var(--nodegroup-frame);
+}
+
+#nodeEditor ::-webkit-scrollbar {
+  background-color: var(--nodegroup-scrollbar-bg);
+}
+
+#nodeEditor ::-webkit-scrollbar-track {
+  background-color: var(--nodegroup-scrollbar-track);
+  border-color: var(--nodegroup-scrollbar-bg);
+}
+
+#nodeEditor ::-webkit-scrollbar-thumb {
+  color: var(--nodegroup-scrollbar-thumb)
+}
+
+#nodeEditor ::-webkit-scrollbar-thumb:hover {
+  color: var(--nodegroup-scrollbar-thumb-hover);
+}
+
+#nodeEditor ::-webkit-scrollbar-thumb:active {
+  color: var(--nodegroup-scrollbar-thumb-active);
+}
+
+#nodeEditor ::-webkit-scrollbar-corner {
+  background-color: var(--nodegroup-scrollbar-bg);
 }
 
 #ndHeader {
@@ -10,7 +36,7 @@
   justify-content: space-between;
   height: 2.5rem;
   padding: 0.25rem;
-  background-color: var(--m-1);
+  background-color: var(--nodegroup-frame);
 }
 
 #ndPatternTitle {
@@ -32,19 +58,17 @@
 #ndPath {
   position: absolute;
   margin: 1rem;
-  color: var(--ma-hover);
+  color: var(--nodegroup-directory);
   text-shadow: 0 0.1rem 0.5rem black;
   z-index: 10;
   pointer-events: none;
 }
 
 #ndGrid {
-  background-color: var(--m-0);
-  background-image: radial-gradient(var(--m-1) 10%, transparent 5%);
+  background-image: radial-gradient(var(--nodegroup-bg-dots) 10%, var(--nodegroup-bg) 5%);
   background-size: 16px 16px;
   background-position: 4px 4px;
   box-sizing: border-box;
-  -border: 4px solid var(--m-0);
   min-width: 4096px;
   min-height: 2048px;
   margin: 0;
@@ -59,15 +83,16 @@
 
   display: flex;
   flex-flow: column nowrap;
-  background-color: var(--m-1);
-  border: 2px solid var(--m-1);
+  background-color: var(--nodegroup-node);
+  border: 2px solid var(--nodegroup-node);
+  color: var(--nodegroup-node-text);
   border-radius: 0.33rem;
   box-shadow: 0 0.25rem 1rem black;
   user-select: none;
 }
 
 .node.active {
-  border: 2px solid var(--cm-bg);
+  border: 2px solid var(--nodegroup-node-active);
 }
 
 .nodeTitle {
@@ -75,7 +100,7 @@
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--m-0);
+  background-color: var(--nodegroup-node-header);
   width: 100%;
   padding: 0.5rem;
   padding-left: 0.5rem;
@@ -119,14 +144,19 @@
   margin-left: -1rem;
 }
 
+/* temporary */
+#node002 .nodePlug::before {
+  background-color: var(--blue);
+}
+
 .nodePlug::before {
   content: "";
   width: 1rem;
   height: 1rem;
   display: block;
-  background-color: yellow;
+  background-color: var(--orange);
   box-sizing: border-box;
-  border: 2px solid var(--m-0);
+  border: 2px solid var(--nodegroup-node-plug-border);
   border-radius: 2rem;
 }
 
diff --git a/src/css/themes/default_dark.css b/src/css/themes/default_dark.css
new file mode 100644
index 0000000..fa0e6c3
--- /dev/null
+++ b/src/css/themes/default_dark.css
@@ -0,0 +1,141 @@
+:root {
+  --dark0: #1D383D;
+  --dark1: #2F4F4C;
+  --dark2: #3C5F58;
+  --dark3: #4A7167;
+  --mid0: #83ABA5;
+  --mid1: #9DC1B2;
+  --mid2: #B1D3BE;
+  --mid3: #C8E9CC;
+  --light0: #C0E2EC;
+  --light1: #E2F1F5;
+  --light2: #FFFFFF;
+  --blue: #507FF4;
+  --purple: #BD64BB;
+  --red: #F95858;
+  --orange: #F98F5B;
+  --yellow: #F7C060;
+
+  /* GENERAL COLORS */
+
+  --window-bg: var(--dark0);
+
+  --generic-text: var(--mid1);
+
+  --generic-link: var(--mid1);
+  --generic-link-hover: var(--mid3);
+  --generic-link-active: var(--light1);
+
+  --generic-button: var(--mid1);
+  --generic-button-text: var(--dark0);
+  --generic-button-hover: var(--mid3);
+  --generic-button-active: var(--light1);
+
+  --generic-textinput-bg: transparent;
+  --generic-textinput-bg-hover: transparent;
+  --generic-textinput-bg-active: var(--light1);
+  --generic-textinput-underline: var(--mid1);
+  --generic-textinput-underline-hover: var(--mid3);
+  --generic-textinput-underline-active: var(--light1);
+  --generic-textinput-text: var(--mid1);
+  --generic-textinput-text-hover: var(--mid3);
+  --generic-textinput-text-active: var(--dark0);
+  --generic-textinput-placeholder: var(--mid1);
+  --generic-textinput-placeholder-hover: var(--mid3);
+  --generic-textinput-placeholder-active: transparent;
+
+  --scrollbar-bg: var(--dark3);
+  --scrollbar-track: var(--dark0);
+  --scrollbar-thumb: var(--mid1);
+  --scrollbar-thumb-hover: var(--mid3);
+  --scrollbar-thumb-active: var(--light1);
+
+  --slider-track: var(--dark0);
+  --slider-thumb: var(--mid1);
+  --slider-thumb-hover: var(--mid3);
+  --slider-thumb-active: var(--light1);
+
+  --generic-module-frame: var(--dark3);
+  --generic-module-bg: var(--dark0);
+
+  /* KEYBOARD MODULE COLORS */
+
+  --keyboard-frame: var(--dark3);
+  --keyboard-bg: var(--dark0);
+  --keyboard-text: var(--mid1);
+
+  --keyboard-slider-track: var(--dark0);
+  --keyboard-slider-thumb: var(--mid1);
+  --keyboard-slider-thumb-hover: var(--mid3);
+  --keyboard-slider-thumb-active: var(--light1);
+
+  --keyboard-scrollbar-bg: var(--dark3);
+  --keyboard-scrollbar-track: var(--dark0);
+  --keyboard-scrollbar-thumb: var(--mid1);
+  --keyboard-scrollbar-thumb-hover: var(--mid3);
+  --keyboard-scrollbar-thumb-active: var(--light1);
+
+  --keyboard-whitekey: var(--mid1);
+  --keyboard-whitekey-text: var(--dark0);
+  --keyboard-whitekey-hover: var(--mid3);
+  --keyboard-whitekey-active: var(--light1);
+  --keyboard-blackkey: var(--dark0);
+  --keyboard-blackkey-hover: var(--dark1);
+  --keyboard-blackkey-active: var(--light1);
+
+  /* NODE EDITOR COLORS */
+
+  --nodegroup-frame: var(--dark3);
+  --nodegroup-bg: var(--dark0);
+  --nodegroup-bg-dots: var(--dark2);
+
+  --nodegroup-directory: var(--mid3);
+
+  --nodegroup-scrollbar-bg: var(--dark3);
+  --nodegroup-scrollbar-track: var(--dark0);
+  --nodegroup-scrollbar-thumb: var(--mid1);
+  --nodegroup-scrollbar-thumb-hover: var(--mid3);
+  --nodegroup-scrollbar-thumb-active: var(--light1);
+
+  --nodegroup-node: var(--dark3);
+  --nodegroup-node-active: var(--light1);
+  --nodegroup-node-text: var(--mid1);
+  --nodegroup-node-header: var(--dark0);
+  --nodegroup-node-header-text: var(--dark0);
+  --nodegroup-node-plug-border: var(--dark0);
+
+  /* todo: add text input, buttons */
+
+  /* OLD START */
+  /* OLD START */
+  /* OLD START */
+
+  --m-0: var(--dark0);
+  --m-1: var(--dark3);
+  --m-2: var(--dark1);
+  --ma: var(--mid1);
+  --ma-hover: var(--mid3);
+  --ma-select: var(--light1);
+
+  --track-col-1: var(--blue);
+  --track-col-2: var(--purple);
+  --track-col-3: var(--red);
+  --track-col-4: var(--orange);
+  --track-col-5: var(--yellow);
+
+  --piano-white: var(--mid1);
+  --piano-white-hover: var(--mid3);
+  --piano-black: var(--dark0);
+  --piano-black-hover: var(--dark1);
+
+  --cm-bg: var(--light1);
+  --cm-hover: var(--light0);
+
+  /* OLD END */
+  /* OLD END */
+  /* OLD END */
+
+  /* TIMELINE EDITOR COLORS */
+
+  /* PATTERN EDITOR COLORS */
+}
\ No newline at end of file
diff --git a/src/css/themes/theme.css b/src/css/themes/theme.css
deleted file mode 100644
index 5551ba3..0000000
--- a/src/css/themes/theme.css
+++ /dev/null
@@ -1,18 +0,0 @@
-:root {
-  --dark0: #1D383D;
-  --dark1: #2F4F4C;
-  --dark2: #3C5F58;
-  --dark3: #4A7167;
-  --mid0: #83ABA5;
-  --mid1: #9DC1B2;
-  --mid2: #B1D3BE;
-  --mid3: #C8E9CC;
-  --light0: #C0E2EC;
-  --light1: #E2F1F5;
-  --light2: #FFFFFF;
-  --blue: #507FF4;
-  --purple: #BD64BB;
-  --red: #F95858;
-  --orange: #F98F5B;
-  --yellow: #F7C060;
-}
\ No newline at end of file
diff --git a/src/css/ui/contextmenu.css b/src/css/ui/contextmenu.css
index e8f1503..c0c6304 100644
--- a/src/css/ui/contextmenu.css
+++ b/src/css/ui/contextmenu.css
@@ -29,4 +29,5 @@
 
 #context.cmhide {
   opacity: 0;
+  pointer-events: none;
 }
\ No newline at end of file
diff --git a/src/ui/node_editor.mjs b/src/ui/node_editor.mjs
index 00ef2f8..6525f1c 100644
--- a/src/ui/node_editor.mjs
+++ b/src/ui/node_editor.mjs
@@ -212,10 +212,18 @@ function updateConnections() {
     const x1 = Math.abs(box1.left - gbox.left) + (box1.width / 2);
     const y1 = Math.abs(box1.top - gbox.top) + (box1.height / 2);
 
+    const plug0Color = window.getComputedStyle(plug0, `:before`).backgroundColor;
+    const plug1Color = window.getComputedStyle(plug1, `:before`).backgroundColor;
+
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+
+    gradient.addColorStop(0, plug0Color);
+    gradient.addColorStop(1, plug1Color);
+
     ctx.lineWidth = 4;
     ctx.lineCap = `round`;
     ctx.beginPath();
-    ctx.strokeStyle = `yellow`;
+    ctx.strokeStyle = gradient;
     ctx.moveTo(x0, y0);
     ctx.lineTo(x1, y1);
     // ctx.moveTo(0, 0);
diff --git a/src/ui/piano.mjs b/src/ui/piano.mjs
index 973c0fa..d6fde1c 100644
--- a/src/ui/piano.mjs
+++ b/src/ui/piano.mjs
@@ -1,5 +1,51 @@
 import { memory } from "../memory.mjs";
 
+// thanks MDN https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API#examples
+let midi = null;
+function onMIDISuccess(midiAccess) {
+  console.log(`MIDI ready!`);
+  midi = midiAccess;  // store in the global (in real usage, would probably keep in an object instance)
+}
+
+function onMIDIFailure(msg) {
+  console.log(`Failed to get MIDI access - ` + msg);
+}
+
+navigator.requestMIDIAccess()
+  .then(onMIDISuccess, onMIDIFailure)
+  .then(() => {
+    listInputsAndOutputs(midi);
+    startLoggingMIDIInput(midi);
+  });
+
+function listInputsAndOutputs(midiAccess) {
+  for (const entry of midiAccess.inputs) {
+    const input = entry[1];
+    console.log(`Input port [type:'` + input.type + `'] id:'` + input.id +
+      `' manufacturer:'` + input.manufacturer + `' name:'` + input.name +
+      `' version:'` + input.version + `'`);
+  }
+
+  for (const entry of midiAccess.outputs) {
+    const output = entry[1];
+    console.log(`Output port [type:'` + output.type + `'] id:'` + output.id +
+      `' manufacturer:'` + output.manufacturer + `' name:'` + output.name +
+      `' version:'` + output.version + `'`);
+  }
+}
+
+function onMIDIMessage(event) {
+  let str = `MIDI message received at timestamp ` + event.timeStamp + `[` + event.data.length + ` bytes]: `;
+  for (let i = 0; i < event.data.length; i++) {
+    str += `0x` + event.data[i].toString(16) + ` `;
+  }
+  console.log(str);
+}
+
+function startLoggingMIDIInput(midiAccess, indexOfPort) {
+  midiAccess.inputs.forEach(function (entry) { entry.onmidimessage = onMIDIMessage; });
+}
+
 const container = document.getElementById(`keys`);
 let playing = false;
 let curX = 0;