From 7f9345b6f8f40a6509f908b1b10b2fc242dba0e1 Mon Sep 17 00:00:00 2001
From: nycki <nupanick@gmail.com>
Date: Sun, 5 Apr 2026 18:42:33 -0700
Subject: [PATCH] fix issue with keys being captured outside of text field

---
 static/piano/index.html | 57 ++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/static/piano/index.html b/static/piano/index.html
index 0918d16..3bd0113 100644
--- a/static/piano/index.html
+++ b/static/piano/index.html
@@ -3,22 +3,30 @@
 <meta charset="utf-8">
 <title>piano</title>
 <h1>piano</h1>
-<div>
+<p>play music with your computer keyboard! currently only works on desktop and with a qwerty keyboard.</p>
+<p>
+  <label for="select-note-layout">note layout:</label>
+  <select name="select-note-layout" id="select-note-layout">
+    <option value="isomorphic-2-1" selected>isomorphic 2,1</option>
+    <option value="isomorphic-5-2">isomorphic 5,2</option>
+    <option value="classic">classic piano</option>
+  </select>
+</p>
+<!-- <p>
   <textarea id="input"></textarea>
-</div>
-
+</p> -->
 <h2>notes held</h2>
 <div id="notes-held"></div>
 
 <script>
-  const inputArea = document.querySelector('#input');
+  // const inputArea = document.querySelector('#input');
   const notesDiv = document.querySelector('#notes-held');
   const ctx = new AudioContext;
   const playing = {};
   let tone = {};
-  let setupCompleted = false;
-  inputArea.onfocus = start;
-  inputArea.onblur = pause;
+  addEventListener('keydown', onKeydown);
+  addEventListener('keyup', onKeyup);
+  useIsomorphic(2, 1);
 
   // arrange notes like on a piano. the second and fourth rows are each a major scale, but the first and third rows have gaps.
   function usePianoKeys() {
@@ -31,8 +39,16 @@
     );
   }
 
-  // arrange notes "isomorphically". moving sideways is 5 semitones, moving diagonally upwards is 2 semitones.
-  function useEqualSteps() {
+  // arrange notes "isomorphically", meaning that transposing chords in frequency space is done by transposing points in regular space.
+  //
+  // default: 5, 2. this creates a pleasing "diagonal" layout where octaves can be reached by moving two keys sideways and one key up (5+5+2=12). 
+  // the downside of this is that some notes are not reachable unless you have five rows assigned (maybe I can capture the F1-F12 keys somehow?)
+  //
+  // alternative: 2, 1. this is "more like a piano" except that there are no empty spaces (no "gaps" where a black key should be).
+  // this is probably better for playing sheet music but it does suck that common chords are much farther apart. also on a four-row keyboard every note appears twice.
+  // a neat side effect of this is that an octave is exactly 6 column steps, the same as the distance between "a" and "j", which means when your hands are in home row
+  // position, they are exactly one octave apart.
+  function useIsomorphic(stepX = 5, stepY = 2) {
     const rows = [
       "1234567890-=",
       "qwertyuiop[]",
@@ -42,28 +58,14 @@
     tone = {};
     rows.map((row, y) => {
       row.split('').map((key, x) => {
-        const semitone = Math.floor(x * 5 + y * 2 - 28);
+        const semitone = Math.floor(x * stepX + y * stepY - 28);
         tone[key] = 440 * 2 ** (semitone / 12);
       })
     });
   }
 
-  function start() {
-    if (setupCompleted) {
-      addEventListener('keydown', onKeydown);
-      return;
-    }
-    useEqualSteps();
-    addEventListener('keydown', onKeydown);
-    addEventListener('keyup', onKeyup);
-    setupCompleted = true;
-  }
-
-  function pause() {
-    removeEventListener('keydown', onKeydown);
-  }
-
   function onKeydown(ev) {
+    ev.preventDefault();
     let key = ev.key;
     if (key == ' ') key = 'Space';
     if (!tone[key]) return;
@@ -80,6 +82,7 @@
   }
 
   function onKeyup(ev) {
+    ev.preventDefault();
     let key = ev.key;
     if (key == ' ') key = 'Space';
     if (!playing[key]) return;
@@ -89,11 +92,11 @@
     oscillator.disconnect();
     gain.disconnect();
 
-    delete playing[key];
+    playing[key] = undefined;
     showNotes();
   }
 
   function showNotes() {
-    notesDiv.innerText = Object.keys(playing).join(' ');
+    notesDiv.innerText = Object.keys(playing).filter((key) => playing[key]).join(' ');
   }
 </script>
\ No newline at end of file