From 23e0c008a854314aa17654df5dfd4ae5b75b300f Mon Sep 17 00:00:00 2001
From: nycki <nupanick@gmail.com>
Date: Sat, 4 Apr 2026 14:12:39 -0700
Subject: [PATCH] piano practice

---
 static/piano/index.html | 99 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 static/piano/index.html
diff --git a/static/piano/index.html b/static/piano/index.html
new file mode 100644
index 0000000..7c4603e
--- /dev/null
+++ b/static/piano/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>piano</title>
+<h1>piano</h1>
+<div>
+  <textarea id="input"></textarea>
+</div>
+
+<h2>notes held</h2>
+<div id="notes-held"></div>
+
+<script>
+  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;
+
+  // 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() {
+    tone = {};
+    ("zsxdcvgbhnjm,l.;/q2w3e4rt6y7ui9o0p-[]"
+      .split('')
+      .map((key, i) => {
+        tone[key] = 440 * 2 ** ((i - 20)/12);
+      })
+    );
+  }
+
+  // arrange notes so that moving three keys sideways is exactly an octave. makes it easy to play octaves. everything else is wonky though...
+  function useEqualSteps() {
+    const rows = [
+      "1234567890-=",
+      "qwertyuiop[]",
+      "asdfghjkl;'",
+      "zxcvbnm,./",
+    ];
+    tone = {};
+    rows.map((row, y) => {
+      row.split('').map((key, x) => {
+        const semitone = x * 4 + y - 20;
+        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) {
+    let key = ev.key;
+    if (key == ' ') key = 'Space';
+    if (!tone[key]) return;
+    if (playing[key]) return;
+    
+    const gain = new GainNode(ctx, { gain: 2 ** -5 });
+    const oscillator = new OscillatorNode(ctx, { type: 'square', frequency: tone[key] });
+    gain.connect(ctx.destination);
+    oscillator.connect(gain);
+    oscillator.start();
+
+    playing[key] = { gain, oscillator };
+    showNotes();
+  }
+
+  function onKeyup(ev) {
+    let key = ev.key;
+    if (key == ' ') key = 'Space';
+    if (!playing[key]) return;
+
+    const { gain, oscillator } = playing[key];
+    oscillator.stop();
+    oscillator.disconnect();
+    gain.disconnect();
+
+    delete playing[key];
+    showNotes();
+  }
+
+  function showNotes() {
+    notesDiv.innerText = Object.keys(playing).join(' ');
+  }
+</script>
\ No newline at end of file
