120 lines
No EOL
4 KiB
HTML
120 lines
No EOL
4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>
|
|
<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-3-2">isomorphic 3,2</option>
|
|
<option value="isomorphic-5-2">isomorphic 5,2</option>
|
|
<option value="classic">classic piano</option>
|
|
</select>
|
|
</p>
|
|
<!-- <p>
|
|
<textarea id="input"></textarea>
|
|
</p> -->
|
|
<h2>notes held</h2>
|
|
<div id="notes-held"></div>
|
|
|
|
<script>
|
|
// 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);
|
|
addEventListener('keyup', onKeyup);
|
|
useLayout(selectNoteLayout.value);
|
|
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-3-2') {
|
|
useIsomorphic(3, 2);
|
|
} 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() {
|
|
tone = {};
|
|
("zsxdcvgbhnjm,l.;/q2w3e4rt6y7ui9o0p-[]"
|
|
.split('')
|
|
.map((key, i) => {
|
|
tone[key] = 440 * 2 ** ((i - 20)/12);
|
|
})
|
|
);
|
|
}
|
|
|
|
// 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[]",
|
|
"asdfghjkl;'",
|
|
"zxcvbnm,./",
|
|
];
|
|
tone = {};
|
|
rows.map((row, y) => {
|
|
row.split('').map((key, x) => {
|
|
const semitone = Math.floor(x * stepX + y * stepY - 28);
|
|
tone[key] = 440 * 2 ** (semitone / 12);
|
|
})
|
|
});
|
|
}
|
|
|
|
function onKeydown(ev) {
|
|
ev.preventDefault();
|
|
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) {
|
|
ev.preventDefault();
|
|
let key = ev.key;
|
|
if (key == ' ') key = 'Space';
|
|
if (!playing[key]) return;
|
|
|
|
const { gain, oscillator } = playing[key];
|
|
oscillator.stop();
|
|
oscillator.disconnect();
|
|
gain.disconnect();
|
|
|
|
playing[key] = undefined;
|
|
showNotes();
|
|
}
|
|
|
|
function showNotes() {
|
|
notesDiv.innerText = Object.keys(playing).filter((key) => playing[key]).join(' ');
|
|
}
|
|
</script> |