static/piano/index.html

@@ -3,48 +3,25 @@
 <meta charset="utf-8">
 <title>piano</title>
 <h1>piano</h1>
-<p>play music with your computer keyboard! currently only works on desktop and with a qwerty keyboard.</p>
+<div>
-<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>
-</p> -->
+</div>
+
 <h2>notes held</h2>
 <div id="notes-held"></div>
 
 <script>
-  // const inputArea = document.querySelector('#input');
+  const inputArea = document.querySelector('#input');
-  const selectNoteLayout = document.querySelector('#select-note-layout');
   const notesDiv = document.querySelector('#notes-held');
   const ctx = new AudioContext;
   const playing = {};
   let tone = {};
-  addEventListener('keydown', onKeydown);
+  let setupCompleted = false;
-  addEventListener('keyup', onKeyup);
+  inputArea.onfocus = start;
-  useLayout(selectNoteLayout.value);
+  inputArea.onblur = pause;
-  selectNoteLayout.onchange = function(ev) {
-    ev.preventDefault();
-    useLayout(ev.target.value);
-  }
-
-  function useLayout(layout) {
-    if (layout == 'classic') {
-      useClassicPiano();
-    } else if (layout == 'isomorphic-2-1') {
-      useIsomorphic(2, 1);
-    } else if (layout == 'isomorphic-5-2') {
-      useIsomorphic(5, 2);
-    }
-  }
 
   // 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 useClassicPiano() {
+  function usePianoKeys() {
     tone = {};
     ("zsxdcvgbhnjm,l.;/q2w3e4rt6y7ui9o0p-[]"
       .split('')
@@ -54,16 +31,8 @@
     );
   }
 
-  // arrange notes "isomorphically", meaning that transposing chords in frequency space is done by transposing points in regular space.
+  // arrange notes "isomorphically". moving sideways is 5 semitones, moving diagonally upwards is 2 semitones.
-  //
+  function useEqualSteps() {
-  // 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[]",
@@ -73,14 +42,28 @@
     tone = {};
     rows.map((row, y) => {
       row.split('').map((key, x) => {
-        const semitone = Math.floor(x * stepX + y * stepY - 28);
+        const semitone = Math.floor(x * 5 + y * 2 - 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;
@@ -97,7 +80,6 @@
   }
 
   function onKeyup(ev) {
-    ev.preventDefault();
     let key = ev.key;
     if (key == ' ') key = 'Space';
     if (!playing[key]) return;
@@ -107,11 +89,11 @@
     oscillator.disconnect();
     gain.disconnect();
 
-    playing[key] = undefined;
+    delete playing[key];
     showNotes();
   }
 
   function showNotes() {
-    notesDiv.innerText = Object.keys(playing).filter((key) => playing[key]).join(' ');
+    notesDiv.innerText = Object.keys(playing).join(' ');
   }
 </script>