I had an idea that I wanted to try, so I tried it. You can try it too, by clicking below. Unless you’re on your phone. You can’t really try it on your phone. It needs a physical keyboard.

Hold the keys on the home row to change the pitch, and hold spacebar to play the currently selected note. You can also change the oscillator waveform, but it’s not going to win any awards for its sound synthesis.

It’s not going to win any awards as anything, really. It’s not a very good instrument!

So let’s talk about the problems, and see if we can do anything to improve them.

The first is a dumb mechanical problem: since you need to hold down multiple keys, you need a keyboard with a high key rollover. My Macbook’s keyboard, for example, can only register at most three of the keys JKL; (although it can register any combination of ASDF just fine). But if I plug in a fancy external keyboard, I have no such problem.

But okay sure fine. That’s not really a problem with the design itself; if you were building this as an external MIDI controller obviously you wouldn’t have to think about that. So let’s talk about problems with the idea of the instrument.

Most instruments separate the act of selecting a note from the act of sounding the note. You can fret a guitar without plucking a string. You can cover the holes of a flute without blowing across it. You can depress an accordion’s keys without working the bellows.

But it turns out those all have something very important in common: there are very different physical mechanisms for selecting and sounding that involve very different body parts. Either your two hands do very different jobs, or your mouth helps out, or you use your arms or feet or something.

Trying to use the fingers to select a note and the thumbs to sound it is… well, it’s not compatible with my brain, at least. But you could probably get used to it, with enough practice.

But we’re not going to practice. We’re just going to get rid of that. We can make it sound on any note:

(You can still press space to sound the root note, or any combination of keys that sum to zero.)

Okay, that’s already a lot more playable. Although it’s very difficult to cleanly sound staccato notes: you’ll often get a little bit of a bagpipe-esque trill as you press and release the keys at slightly different moments.

Hmm.

Well, this is sort of like a woodwind, right? The idea of “chording” to get to a note. It’s like a woodwind with extremely regular fingerings: we don’t have to worry about any physics of sounds or actually constructing a hole pattern to do what we want. We’re just dictating that each key always has the same effect on the final pitch, raising or lowering it by a certain number of semitones.

So what if we played it like a woodwind? This one will request microphone permissions when you click on it. Do not be alarmed. To play it, just blow into your microphone.

Yeah, it doesn’t work… great. It’s… something? Maybe? But it feels like a step in the wrong direction. Let’s go back to what we had before.

Okay. It’s not perfect, but it’ll do for now.

Alright. So it’s not a woodwind. It’s a chorded… monophonic… keyboard… thing. Sure. Whatever.

Let’s talk fingerings. Ascending major scale, all on the right hand:

o o o o  C  o o o o    0
o o o o  D  o x o o   +2
o o o o  E  o o x o   +4
o o o o  F  x o x o   +5
o o o o  G  x x x o   +7
o o o o  A  x o o x   +9
o o o o  B  x x o x  +11
o o o o  C' o o x x  +12

And a descending scale on the left hand:

  0  o o o o  C' o o o o
 -1  o o o x  B  o o o o
 -3  o o x x  A  o o o o
 -5  o x o x  G  o o o o
 -7  o x x x  F  o o o o
 -8  x o o o  E  o o o o
-10  x o x o  D  o o o o
-11  x x o o  C  o o o o

But of course, there are lots of redundant fingerings with this design. You can key G as +1 +2 +4, or as +8 -1. I think this is a pretty big strength, since alternate fingerings might have a smaller edit distance to the fingering of the previous note, and the symmetry of the left and the right hand is nice. I think it gives a very nice range, also – a little over two octaves, which is great for noodling around with.

Still, we’re free to use whatever “tuning” we want.

Let’s try something more explicitly musical. You can go up by thirds, and go down by seconds or thirds. It’s pretty easy to randomly mash keys with this one, and wind up with something vaguely melodic.

Here’s a fingering like a diatonic flute. If you have a keyboard with NKRO: press your thumb first, then hold keys left-to-right (without releasing any) to play a major scale. And hold your right pinky to overblow, because why not.

Or a similar, symmetric variation. Start with the thumb, then roll the fingers of either hand from pinky to index finger, then do the same on the other hand:

Or maybe we can lean into the diatonic world. Here you can play a major scale with a single keypress – but you can access the full chromatic range by using your right pinky.

Which is basically just… a worse piano. A monophonic piano that inexplicably uses chording to access the accidentals.

What’s the optimal fingering? I don’t know. I really like the original symmetric binary thing, but it’s fun to play around with alternatives. Here, you can play around with this one.

Intervals:

And while we're at it, you can change the keybindings too:

Talk to me about the implementation

Okay, let’s move on from “the idea of a monophonic chorded instrument” to “the stupid JavaScript demo on this page.”

First off: what the heck is that key display? Why doesn’t it just use a regular piano keyboard to show the selected note?

Okay, maybe you aren’t wondering that. Maybe the answer is obvious: pianos space semitones irregularly. The (physical) distance from B to C is greater than the (physical) distance from C to C♯. This would mean that in order for the keyboard to correlate with my “progress bar” display, I would have to make the notches different sizes and I thought that would be confusing. The notches represent semitones, and all semitones are the same size (in the tuning system this synthesizer uses, anyway).

So I instead I chose a Jankó keyboard layout. This is one of the more practical isomorphic keyboard layouts, because it’s very similar to a regular piano keyboard. You can see the familiar pattern of black keys, and probably wouldn’t have too much trouble picking it up if you already played piano.

(The Jankóness is sort of obscured because I overlapped the two rows of keys in an attempt to make something a little more compact and look a little more like a regular keyboard, but the layout is the same.)

Next off: I was impressed by how nice the Web Audio API is? There was a little bit of weirdness to get the microphone thing working in Chrome and Safari – you need to give your ScriptProcessorNode an output and hook it up to the audio context destination, even though it shouldn’t have any outputs. Firefox gets this right, but the other browsers require this little dance.

(ScriptProcessorNode is technically deprecated, but the alternative is absolutely insane, so. Whatever. If you’re reading this in the future, and the microphone demo doesn’t work… I am sorry.)

Using <canvas> was actually more difficult, which surprised me. There’s no way to disable antialiasing when drawing lines, which meant I had to be very careful that everything I did was pixel-aligned to maintain the retro lo-fi illusion. And I originally used lineCap = 'square' for all of my drawing, which resulted in completely different results in all three of Chrome, Safari, and Firefox. So I had to change everything to butts. Canvas: less consistent than the Web Audio API!

It was fun to draw the fonts. It was my first time using JavaScript template strings (I’ve been away from the web programming world for a few years). The source for this blog post is minified, but I defined my bitmap font like this:

const normalFont = {
  'A': c`###
         # #
         ###
         # #
         # #`
, 'B': c`## 
         # #
         ##
         # #
         ## `
, ...
}

Where c is a function that parses those into a more convenient representation. This worked so well that I made my very own “icon font” for the waveforms:

const symbolFont = {
  'Z': c`    #      #
            ##     ##
           # #    # #
          #  #   #  #
         #   #  #   #  #
             # #    # #
             ##     ##
             #      #`
, 'Δ': c`   #     #     #
            #     #     #
           # #   # #   #
           # #   # #   #
          #   # #   # #
          #   # #   # #
         #     #     #
         #     #     #`
, 'U': c`##        ##
           #      #  #
           #      #  #
            #    #    #
            #    #    #
             #  #      #
             #  #      #
              ##        ##`
, ...
}

Which, you know, there is obviously a better way to do all of this, but it was nice for a janky demo like this. I didn’t have to shove an asset pipeline into my static site generator.

what are you doing with your life

This all started when I was sad that I couldn’t buy an accordina for less than, like, two thousand dollars, and I started thinking about what it would take to build a digital simulacrum. Somehow that line of thinking morphed into this two-handed chorded thing, probably because I was thinking about ways to reduce the number of buttons.

I am still curious how this would work as an actual electronic wind instrument. I might have to build a version with a real pressure sensor one day, just to see if the fingering is usable in practice. Or I could just buy a foot pedal…

But I probably won’t do either of those things. I think this blog post scratched the itch enough already. For me at least.

okay bye

If you thought this was interesting and you are curious about other weird instruments with mathematically logical layouts, here are some hyperlinks for you:

The Dualo Du-touch is by far the most promising digital instrument I have ever come across. Ignore all of the gimmicky stuff it can do; just focus on the ergonomics: it has the morally correct key layout, and a nice portable form factor. I have no idea how it feels to use it in practice, because I don’t have one, but I want one. Here’s a video of someone playing music on it.
The Lumatone is a much more expensive instrument that also uses an isomorphic layout. I love the ergonomic touch of the angled keybed – I have an Axis controller and it’s basically impossible to press keys with your thumbs without mashing adjacent keys. The Lumatone borrows the same solution used by Jankó keyboards – and organs, I guess, sort of.
I don’t know of any Jankó keyboards you can buy, but if you have a 3D printer there’s a very cool mod that someone made that will convert the keys of a cheap-ish MIDI controller into Jankó versions.
The Wicki-Hayden layout is a different isomorphic layout that’s nicely suited for diatonic play. You can actually buy physical concertinas that use this layout, in prices ranging from technically affordable to wait what to haha really.
This one’s a little bit different, but I would be remiss if I left it out the M3 guitar. If you own a guitar, tuning the strings in major thirds gives you a lots of regular, movable, four-finger closed chord shapes. It’s superior to all-fourths tuning in a lot of ways that I won’t get into, but you do lose range compared to standard tuning. (I recommend sacrificing some of the treble range, and making sure you find an unwound string for the high A♭.)

I love learning about isomorphic layouts and regular tunings so if you know of any other interesting devices like this, please let me know in the comments.

Binary synthesizer

Talk to me about the implementation

what are you doing with your life

okay bye