nycki/nycki.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix issue with keys being captured outside of text field

Browse source
This commit is contained in:
Nycki 2026-04-05 18:42:33 -07:00
parent ed45d2a72f
commit 7f9345b6f8
1 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
static/piano/index.html
View file

@ -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>