I want to say first off that this is super cool, and I really applaud you for shipping it. The tones sound pretty great on my machine, and the button pressing is good. I don't detect any jank or latency like I frequently do with web-audio.

That being said I have a few constructive critiques.

First is I wouldn't say it's intuitive. Having the harmonics ascending from right-to-left breaks my brain. Wait, on second look they are kind of scattered about in a somewhat random way? Why are 5 and 3 so far from each other? I might like it if this was laid out in a lattice or some kind of regular structure. I don't doubt that with practice and reading I could learn it but, IMO, if I have to read an instruction manual I'm already checked out..

Second, there needs to be some kind of indication at where I'm at in terms of the internal state of the multiplied ratios. So if I've stacked on 3 consecutive 2/3, the only feedback I get is when I hit a note.. and I might forget where I'm at in the "pitch space". You could just have a simple "stack" at the top that shows the last applied ratio, and maybe the final product or quotient next to it.

Thanks to you asking why it's right to left instead of left to right, I have the opportunity to talk about some interesting design decisions. I agree there should be an organized pattern. For example, 1-30 lexographically. So I'll explain the hidden logic and pattern.

The three necessary primes to represent on the organized lattice are 2, 3, and 5. Given a key like 16, each of these primes should be represented in its adjacent buttons, hopefully in an axis-like manner, because these are the consonant notes to it. Left of 16 is 5/4, right is 3/4, and up-down is 2 and 1/2. But why this way?

Consonant pitches stay within a range - so large leaps in pitch are the least common. That means next to any number, the adjacent keys must have close by numbers. That's why the three primes 2, 3, 5, are converted to 2, 3/4, 5/4 - because these are the closest numbers to 1, after multiplying by a power of 2.

Your hand has a harder time reaching vertically than horizontally. 2 is the largest of these three numbers, which is why 2x is on one of the 4 vertical directions, and 3/4 and 5/4 are on the horizontal directions. Furthermore, it means that 2x must be on the 5/4 side, not the 3/4 side - because this keeps pitch distances the smallest.

There's only one remaining decision - why right to left? Your hand has an easier time turning inward than outward. And, whichever way it turns, the horizontal notes should have pitches as close as possible. Thus, 5/4 must be to the left direction.

Luckily, divisors don't exist, so the fact that the 3/4 axis and 5/4 axis are on the same line - rather than 3/4 turning to 4/3 on the opposite side - is perfectly fine.

So thanks to the above, the keyboard is forced to be this way, and every note is in its logical and rightful place, with no subjective choices. Except not, because there's not enough space. And because 7 and 15 can't be on the lattice, so they are just placed wherever there's room. 2 should really be below 1, and 3 should be where 2 is. 30 should be 40, etc. I tried to maintain the structure as much as possible but had to make things fit.

It'd be interesting to see a fantasy layout: say you were to let go of the computer keyboard layout, how would you set it up? Thumb keys, foot keys, toggles, etc, go wild.

Edit: There are decent guides to designing and hand-wiring keyboards using computer keycaps. I haven't looked far, but something like this https://medium.com/cracked-the-code/a-complete-guide-to-buil... .

The linked layout editor (http://www.keyboard-layout-editor.com) allows pretty wild layouts. Try loading the ErgoDox layout. While you might want to go farther still, it does nicely showcase rotated thumb clusters.

The plate & case builder tool can then generate some basic CAD files for a sandwich keyboard build to fit your keys. This can then be laser cut or something.

Because most designs use a Teensy with USB connection, you might even be able to make the keyboard output MIDI, so it could easily plug into a DAW, or whatever.

Hex keyboard, purple keys under thumbs. Extra set of temporary purple (blue) keys 1/2-1/7x, not ratios, applying to one copy only. Two copies of the green keys, one for each hand. Added numbers are 36, 40, 48; unsure about 45. 7, 14, 15, and 30 probably moved. The organized core should be continued as much as possible; I share the sentiment that ease of learning is important. The physical buttons should make fat-fingering convenient, because that's useful for fingering (and for playing lots of extra notes).

The musician probably wants his feet for other things like sustain pedal and effect pedals. I won't be too greedy :)

Though, one possible use of foot pedals is to select the instrument timbre. Since with this layout, you can take the role of two musicians, playing two different timbres, and you might as well have the flexibility to change one instrument out while the other is playing. All your fingers are occupied so it'd be hard to ask them to press extra buttons.

Hex keycaps are definitely less common, but can still be found (https://www.littlekeyboards.com/products/hex-keycaps). Or you could get 3d prints of the exact profile you want.

Edit: Interestingly, above were also the result of an experimental musical instrument. See https://kbd.news/0xC-0x33-1525.html

Very cool work and explanation!

> harmonics ascending from right-to-left breaks my brain

It's not like instruments are totally consistent from one to another in how that sort of thing works. It's not breaking your brain, you just aren't familiar with it yet.

> if I have to read an instruction manual I'm already checked out

Not saying learning this keyboard is necessarily a worthwhile pursuit, but that reads less like criticism and more like an admission that "this just isn't for me". And it raises the question: what kind of instrument would you learn that didn't involve understanding how it works and acquiring muscle memory?

"Instruments are made for people who can play them." https://www.youtube.com/watch?v=QCwqnjxqfmY&t=1914s

Showing the internal state is a pretty good idea. I'll see if I can port over my visualization from my desktop version; it'll show the absolute pitches of the notes on a real number line, and how many powers there are of each prime. It won't be soon though.

Ooh there's a desktop version?? :-)

There's a desktop version which I unfortunately don't have the time to get in release state, but I'll release the source code for everything eventually (maybe months later).

Do you have a GitHub I can follow?

I'll put it here, then: https://github.com/ad8e/harmonic-keyboard

(nothing there now!)

This would be awesome, thanks.

State tracking is up. Fundamental = product of (prime)^(number of squares in the row), where the blue squares are 2, green 3, yellow 5, red 7. Let me know if this interface can be improved, such as by bolder colors or better explanations.

I didn't find a good way to implement absolute frequency without the rest of the visualization too, since it has to store and show "what were the last notes I just played", so the user can compare their frequencies to the current note options. So I don't have an idea for an easy-to-implement design here.

This is exceedingly cool, thank you for putting it out there.

A small suggestion: when you press the purple buttons, it would be neat to see the green numbers change by the multiplier (or have an option to do so). This would let you easily see parts of the keyboard transpose correctly vs not, and what new pitches you get access to. Even sweeter would be a quick animation to show "where the numbers went".

I would also like to be able to have the purple buttons be active only when pressing the keys, so that I could quickly modulate up a just fourth and back. Having to remember where I am in the modulation state is a bit much, and very different from typical musical instruments.

But I've been playing with this for a good while, trying to recreate basic stuff like V7 -> I etc and it's very cool, thanks again.

These are great ideas, and I will implement them.

In the original design, temporary harmony changes (hold-and-release) was the feature of the thumb keys, but there are no thumb keys here, huh.

It's necessary to have stateful harmonic changes, to be able to transition more than a little at a time. But I will add your option too, since it's also useful. I'll need to think about the interface a little bit, since I would either have to add ` or Shift to the keyboard, which will widen it a bit.

When you press these new temporary keys (after they're done), I'll make them change the green numbers. That is hard to do with the permanent purple keys, since they need to keep a base state.

Your feature is done, try it out.

If you are interested in novel keyboard layouts, there are many 2-dimensional chromatic layouts where transposition is isomorphic (i.e. playing in a different key only requires changing where you start). In one notable example, all major and minor triads can be played with a single finger[1], because 5ths and major/minor thirds are always adjacent.

1: http://www.shapeofmusic.com/note-pattern.php

This is me playing a keyboard with a "Janko" chromatic layout: https://youtu.be/82xaEGgiiRs

I gave it a shot but found it difficult to unlearn a decade of traditional piano training. Also, unlike typing in Dvorak, you can't just use software to change the layouts of existing instruments. That said, if anyone knows where to find a high-quality piano with a chromatic layout, I'd love play it!

The Lumatone is a high quality isomorphic keyboard. There's software to control the layouts, and you can use layouts other people have created: https://en.xen.wiki/w/Category:Lumatone_mappings . I'll warn you though that the keyboard costs around 4000 USD, and it's around a 2 month wait for the company to build it and ship it after the order.

https://www.lumatone.io/

Thanks, this is definitely something I'd be interested in!

Thanks, the Janko layout was another one I was trying to remember; I was thrown because the images on the Janko wikipedia page are of the original Janko, and I had seen the Janko layout on the Japanese keyboards (e.g. the Chromatone and the Wholetone) which use hexagonal keys so look quite different.

You might as well want to check out this tool: https://www.harmopark.app

I think you need far more basic practical examples how to play the thing, just figuring out a random major chord was a hassle and I still have no idea how to play some specific chord like for example the most basic C major chord. And if I understand it correctly, moving from e.g. major to minor chord requires transposing the right hand with the left-hand keys?

Of course the instrument having hidden state makes all this far more complicated. Would be neat if the key labels would also indicate the absolute note so I wouldn't need to do mental arithmetic here.

I don't know how practical that is, but you can figure it out analytically.

In equal temperament, you can find the frequency ratio of two notes in an interval by raising 2 to the power of X/12, where X is the number of semitones.

Once you know that, you can look for some green numbers that, when divided, would have that same ratio.

So to make a chord, you figure out the ratios. Here's an example for major triads. First, some math to go from equal temperament to ratios. A major third is 4 semitones, so that's 2*(4/12), and a perfect fifth is 7 semitones, so that's 2*(7/12). Those work out to 1.2599 and 1.4983.

They're really "supposed"[1] to be 1.25 and 1.5, i.e. 5/4 and 3/2.

So now that you know these ratios, you can look for 3 numbers that satisfy the two ratios. If you change 3/2 into 4/6, then it becomes pretty clear that 4 and 5 will satisfy the 5/4 ratio (giving you a major third) and that 4 and 6 will satisfy the 6/4 ratio (giving you a perfect fifth). So to get a major triad, you can play 4, 5, and 6.

With similar reasoning, you can figure out that 10, 12, and 15 form a minor triad.

----

[1] If you look at equal temperament as a compromise that doesn't get quite the "right" ratios.

You appear to know what you're talking about (I certainly don't), but it also seems to me that the knowledge in this post is not accessible to I would imagine the vast majority of people. Do you have any recommendations for where to start learning about this kind of thing aimed at music theory troglodytes like myself?

Music theory is ... is like git. The underlying framework is pretty nice and based on only a small set of basic principles. But the user interface is badly designed and none the tutorials explain it well.

Once you understand the basic principles, you're good. But no one has figured out how to explain things to a new person.

But since you can't get much use out of music theory without going through some user interface (a particular instrument or notation), you also need to learn how it's laid out (how one maps onto the other, really). But maybe something like this keyboard could be an interesting teaching tool?

[Too late to edit, replying to myself...]

That's supposed to be 2**(4/12) and 2**(7/12) above. I forgot to escape the asterisks. (It's exponentiation, not multiplication.)

> I still have no idea how to play some specific chord like for example the most basic C major chord.

The harmonic series or overtones goes:

    1   2   3   4   5   6   7   ...
    C1  C2  G2  C3  E3  G3  B♭3  ...

You could play 1,3,5 to play C1,G2,E3 but this gives notes from three different octaves. What you usually want is C3,E3,G3, and fortunately it's right there: play 4,5,6.

If you know your chord's format in just intonation, there's a (not-so-)secret converter. Type in "play_on_keyboard('4-5-6 15/2 12 10 20/3')" in the F12 console to produce fingering and play it on the keyboard. Maybe I should make this clearer by adding a text box.

EDIT: thanks to your feedback, I added a textbox below the keyboard. It will show how to play things if you can write the ratios of the notes. This may be a helpful map for turning 12 ET into just intonation:

C 16/15 D9/8 6/5 E5/4 F4/3 7/5 G3/2 8/5 A5/3 16/9 B15/8 2

A fun way to improvise without knowing any harmony on a regular keyboard is to stick to the black keys. This is basically a pentatonic scale and doesn't have any big dissonances.

In some sense, on an equal temperament piano a major 7th is less dissonant than a major 3rd. But major 7th can’t be played using black keys and major 3rds can.

Check the table in 12 tone equal temperament > Comparison with just intonation section here [1].

Major 7th and major 3rd are both harmonics of the root frequency, so larger differences between JI tuning and 12TET tuning for them cause noise.

In JI, theres a sense where both major 3rd and major 7th are both perfectly in tune with the root frequency. If you play the 3rd two octaves up, all of the harmonics match with all of the harmonics in the root frequency. Same if you play major 7th three octaves up.

The 2 octaves up major 3rds harmonics are 5,10,15,20,… multiples of root. 3 octaves up major 7th are 15,30,45,… multiples of root. The roots harmonics are just 2,3,4,5,6,7,8,9,… so there’s no new frequencies.

If you play square waves with these notes, in a sense you aren’t even playing a chord, just changing the timbre from a square wave to something else.

Kind of tongue in cheek cuz there are other ways of looking at dissonance. This is just an illustration of some ways you might not have seen before!

[1] https://en.m.wikipedia.org/wiki/Equal_temperament

This is super cool!

It would be awesome to be able to record the notes to a sequencer, and then play them back, optionally sending via Web MIDI API[1], so that one could control an external synthesizer or VST.

[1]https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_AP...

That was my first thought too, but,vast vast majority of synthesizers only understand equal temperament. At best you can adjust starting point I.e. What frequency is A4. How would you even send the appropriate frequencies via midi?

This isn't a fancy keyboard layout over the standard equal temperament notes / frequencies. If I understand it correctly, this is a generator of just intonation frequencies. This will not sound "in tune" of played next to a regular synth I think.

From what I know, typically people would use a pre-bend to achieve microtonalism in MIDI. In MIDI, like in most strictly-musical encodings, notes are specified in terms of semitones, with cents modifying those values. A cent is defined as 1% of a semitone. With a tuning reference (f), like 432 Hz, we can calculate the frequency a number of steps away with this handy function:

  f' = f * 2 ^ (i / 12)

where f' = frequency to be solved, f = reference frequency i = steps/interval (semitone distance from reference)

This works with micro-semitones, and/or negative values. So for example, if we want to know what 1.5 steps above 432 Hz is we would plug in the variables:

  f' = 432 Hz * 2 ^ (1.5 / 12) ~= 471.0993 Hz

In the case where you know frequencies, and want to get the semitone steps, you're taking the base 2 log. So,

  i = log2(f' / f) * 12

Now you'll have the note value of the exact frequency, and you can use the decimal part to set your pre-bend.

With the two directions' functions defined it's not so hard to go between frequencies and "notes". And no, you won't be in tune with most gear unless you're using 12TET A5=440Hz

That is a most thorough answer and I appreciate it very much :-)

It's possible to generate 12 ET too, by rounding all the keys and harmony changes. Just as 12 ET is a good approximation to Just Intonation, Just Intonation is also a good approximation to 12 ET. The tones lose some accuracy but gain compatibility with MIDI interfaces.

However, it would be hard for me to implement this feature, since I have no midi devices, no midi experience, and my browser (Firefox) also doesn't support WebMIDI.

I'm thinking about implementing record-and-replay, since the playback and storage-format are already done, but midi will likely be deprioritized unless there is significant interest.

Some folks might be interested in listening to modern musicians playing just intonation- https://lamonteyoung.bandcamp.com/album/just-stompin https://en.wikipedia.org/wiki/La_Monte_Young

I also like his drone work and have lots of fun with paulstretch.

For those who are curious about Just Intonation but who are more of a casual listener and find the usual examples either way too experimental or academic, Neurogenesis by Robert Rich is a great and immensely pleasant-sounding, relaxing electronic ambient album masterfully written in pure JI (I really think it lends itself to the genre).

As a nice touch, you can listen to it before you buy—which I did (and I did): https://robertrich.bandcamp.com/album/neurogenesis

Fantastic, this is great work. Takes me back to my undergrad days studying Ben Johnston’s JI systems for my own compositions.

This is really interesting and creative! Did you deliberately make some notes sit outside of the standard 440hz diatonic scale? Even when I click your Debussy demo, you’re hitting some notes outside of the normal 440hz scale!

With the design of this keyboard, only one note (maximum) can be in tune with the 440Hz equal temperament tuning, at least apart from octaves. No complicated proof of this is necessary since the ratio between any two notes in equal temperament is irrational and every note combination on this keyboard is rational. The irrationality of equal temperament is likely part of the reason why equal temperament was no common until relatively recently in human history.

I think the example also highlights why equal temperament is pretty good if you can't change tuning on the fly. Certain keys (the musical theory kind, not the keyboard kind) will sound completely different. At least equal temperament is equally out of tune from just intonation (how singers and instruments with variable pitch tune chords) for every key.

Something from the well-tempered clavier by Bach would likely work a lot better as a demonstration because it doesn't stray nearly as far from the home key. You could also make it work better by maybe adding in some keybindings to adjust the key like harps use. You probably wouldn't even need to add in 12 modes for it since harmonically related keys still work pretty well. Keys like F and Bb work well together because they are close on the circle of fifths, but F and B (natural) will not since they are basically as far apart as possible.

So, there are two things currently going on with the Debussy example.

The first is, yes, some of the notes from Debussy are actually poorly playable on the piano. One is this: https://i.imgur.com/K0Wuu3Q.png. This is a visualization I built (and which can't be ported to web easily, so unfortunately it's just something I have for now). It's like a scrolling player piano with rising notes, and the numbers next to the bars are what the numerators are. Note there are two 7s in the middle, and pianos are not good at 7s. I've verified these numbers are correct manually, so it's supposed to sound like that and the piano has an inaccurate approximation. This corresponds to this location in the score: https://i.imgur.com/24XY8vR.png

The second is, I suspect there is a mistake near the end. This visualization overlaps the original with the twelve-tone version: https://i.imgur.com/tS7WzRg.png. Note how some of the bars are separated from each other. I'm currently in the process of checking these notes. My original 12ET -> Just Intonation conversion was automatic and I fixed up all the errors I could find, but I could have missed one. EDIT: yes, there was. I fixed it now.

The third doesn't happen in this example, but sometimes composers want to deliberately round, such as in the Circle of Fifths. That would create unpleasant commas. I'm kind of lucky that it didn't happen in the demo I chose. The Circle of Fifths is not actually an issue; first, you can't keep old notes persistent across the whole circle; they will interfere. And second, thanks to Diana Deutsch's experiments on pitch memory, we know that if there are more than 16 notes between the old and new note, you shouldn't be able to discern the comma. However, although the Circle is not a big deal, other rounding intervals can become an issue, like 63/64, where the composer would like the rounding to occur somewhere other than the exact pitch repeat. Listeners are effective at detecting when an exact pitch repeat is slightly inexact, while they have a harder time discerning slightly-off harmonies.

To specify, the pitch gets wonky on the first melodic phrase after you introduce the first 4 chords. It’s the second note of the melody E A B… A is not tempered at 440hz to the scale!

I'm not sure we're looking at the same thing, but I fixed an issue with the just intonation transcription. Now, the largest non-transient deviation from 440 Hz scale is 0.14 semitones, caused by Debussy modulating by a third (5/4).

To clearly show you what sounds off, replicate this

Reload the page

Type .,;m

You’ll notice that m is not the “right” temperament as the dom7 in that arpegio

This is great. And if you're into alternative keyboard layouts, Eventida Misha [1] is a Eurorack module with an interesting interval based keyboard, where the keys move up/down a certain number of steps in a scale, relative to the previous note that was played. Great fun for improvisation, with no chance of accidental dissonant notes.

[1] https://www.youtube.com/watch?v=1RS4giQHAUg

Very cool! Have you seen music mouse [1]? I wonder in what ways this intonation keyboard concept could be mapped into a 2d touch interface, maybe with some ideas from music mouse. But if it's just a single XY pad, I guess it becomes just a piano again but with tuning presets? Or maybe 2 pads could be used...

[1] https://teropa.info/musicmouse/

Neat! reminds me of my old web app https://fritzo.org/keys

A very interesting and educational musical experiment. Are you planning to expand, maybe to a plugin? Max4Live would likely be viable. Thank you.

Unfortunately, I won't have time to expand on this project unless someone hires me to work on it. For now, it's just to educate people and let them copy it.

An astounding and very fun project, well-explained and well-deserving of support. You might very well find an arts endowment (or game concern) that recognizes that.

Well that was marvellous to play with! Thank you.

My favorite part of the half life 2 mod called Gary’s Mod was something sort of similar. It was a piano you could sit at and it provided sheet music for popular and nerdy songs using the keys in your typing keyboard. It was a pretty wild and magical experience to be able to play music using your own fingers instantly without having to learn anything new. Granted, you had to know the song in order to know the actual rhythm to which the keys had to be pressed, and you had to experiment a few tries to really understand the flow. But it was fun and easy to do so

This is pretty cool. Does this assist with random music generation in any way?

Yes, there's a secret music generation project if you can find it. If you are asking this without knowing about that secret project, that's a very deep insight.

Oh! Thank you. That compliment has made my day. I have no idea about the secret project.

I'm an indie game developer who can do everything other than music, so I often wonder about generating it.

Ah yes, the QWOP piano. An elegant instrument for a more civilised age.

Brain expanded, thanks