What is the Microtonal Synthesizer and how do I use it?

The Microtonal Synthesizer is a simple synthesizer written in JavaScript capable of playing any pitch whatsoever (within human hearing range, anyway). It generates sound using Jussi Kalliokoski's audiolib.js. Start with one of the preset keyboards or make your own! Simply click on the colored part of the screen to bring the synth to focus and start bangin' away using your keyboard or mouse!

To add a note, click on the colored part of the screen to clear the selection, then just enter either a frequency or the pitch in cents (hundredths of a half step) relative to a particular note, and you have a new note. You can play around and compare pure thirds to equal-tempered thirds, or try out different temperaments. You can set a key on the keyboard to your notes to play them more easily -- in fact, you can set the same key to many notes to play chords (though you can only have one key per note at the moment, sorry)!

You can add a note in all 11 octaves (yes, 11, because we're counting 0) using either the "add in all octaves" checkbox when adding a note or the "all octaves" interval type. You can remove a note from all octaves using its respective checkbox as well.

Whoa whoa whoa. Microtonal? What are you talking about?

Ah, yes. Look at a piano. It has a bunch of keys (88 for most modern pianos, spanning 7 octaves and a bit), and each key plays a particular note. If it's "in tune", you'll find that A above middle C is 440 Hz, Bb is about 466.164 Hz, B is about 493.883 Hz, and so on. So if I play a note at 480 Hz, what note is it? Well, it's somewhere between a Bb and a B, but where is it on the piano? Answer: it's not on the piano! On a piano, only the 88 notes that the piano tuner set up can be played. On this Microtonal Synthesizer, it's easy to add a note at 480 Hz and play it, unlike on the piano.

The basic organizing principle on the piano is that to go up an octave, you multiply the frequency by 2. So if A4 is 440 Hz, then A5 is 880 Hz, A6 is double that, or 1760 Hz, and so on. (By the way, each octave starting at C has a number; C4 is middle C, B3 is the B directly below that, etc.) This is because, if you hear two frequencies, one twice the other, the sound waves line up and you perceive those two notes as basically the same. This is why C2 and C5, for example, are both called C. A C is a C in any octave.

So the modern piano divides this octave into 12 equal steps. There are 12 notes in the piano's octave: C, C#/Db, D, D#/Eb, E, F, F#/Gb, G, G#/Ab, A, A#/Bb, B. Each of them has a frequency that is a constant ratio 2^(1/12) from the previous note. As these 12 steps are equal, this is called 12-tone equal temperament, or 12TET. Almost all Western music is based on this 12TET scale, called the chromatic scale, and its subsets. However, this equal temperament is only a couple hundred years old; before this, musicians based their intervals on whole number ratios like 5/4 and 9/8 and 8/5. Those intervals sound much purer, but they lack symmetry -- if C is 1, D is 9/8, and E is 5/4, the whole step from C to D is a ratio of 9/8, but the whole step from D to E is 10/9. They're not the same! To allow playing in all keys the same way, 12TET was invented as a compromise. (I'm skipping some parts of the story, obviously!)

The Offtonic Microtonal Synthesizer lets you hear and experience tunings other than the 12TET of the piano. Don't get me wrong, 12TET is great, but why not explore the world of microtonal music? What would music be like with 19 equal steps to the octave instead of 12? (Surprisingly, it sounds pretty good, because the 19TET major third is closer to the pure 5/4 than the 12TET major third.) Or maybe you want to set up your own system of mean-tone or just intonation or what have you. As they say, the power is yours!

So why are the notes arranged like that? That rainbow, what does it mean?

The frequency spectrum is one-dimensional and logarithmic. One way to organize pitches would be like the piano does it, just putting them all side by side, and how far along a note is would be proportional to the log of its frequency (since the frequency doubles as you go up one octave, if it were proportional to just the frequency rather than its logarithm, the high notes would be spaced much further apart than the low notes). However, the screen is two-dimensional. So I decided to place the notes on a diagonal line that wraps around. Each part of the line represents one octave, and the label on the side tells you which octave it is. The white and black vertical lines are simply guides for where the 12 notes of the 12TET scale lie, like the notes of the piano.

Um, nothing's happening? Or, maybe it is, but it's SO. SLOW.

I'm working on it. It runs fast enough on OS X Chrome, but it's MUCH slower on OS X Firefox and has a nasty start/stop thing going on OS X Safari and OS X Opera. Hopefully, future versions of the browsers will implement the audio API better. The mobile browsers do not currently support the audio API's necessary for this application to function, and neither does Internet Explorer. If you're running the latest version of a supported browser and can't get any sound to play, try clicking inside the colored area; you might be accidentally typing into some other place! If it still doesn't work... What can I tell you? This is experimental technology at this point. Keep checking back!

Cool, I can play many notes at once! But why do some note combinations just not work?

That's right, you can play as many notes as you want at the same time with the keyboard. The only caveat is that your keyboard itself may not support your holding down multiple keys. Because of the way the keyboard is wired, you might find that some combinations just don't work. As annoying as this is, there's really no way around it other than investing in a more expensive keyboard, or remapping the keys to something that works better for you. By the way, you can set notes to the arrows, but that will move the screen. And if you set one note to the command key and another to q and you play them at the same time, your browser may spontaneously quit. ;p

How does adding intervals work?

There are two modes for adding intervals. Ratio mode allows you to add a note whose frequency is some ratio from your note, in either direction. For example, entering a ratio of 3/2 will create a note that is a pure perfect fifth above or below the selected note. Equal-tempered mode allows you to add a note that is some number of equal-tempered steps away from the selected note. For example, entering 7/12 will create a note that is a 7 12TET steps, a 12TET perfect fifth, above or below the selected note. Ratio mode multiplies the frequency by the given ratio, and equal-tempered mode multiplies the frequency by 2 to the power of the given ratio. All octaves mode simply adds all octaves of the given note if they aren't already there.

A fun interval to try is a frequency ratio of 5/4. This is a pure major third. Compare it to an equal-tempered interval of 4/12 (four half steps), the 12TET major third. You can do this by adding both intervals to a note, setting them to different shortcut keys, and playing the notes in pairs. Notice how much purer the 5/4 third sounds? Another nice interval is the frequency ratio 11/8, which, from C, is a note somewhere between F and F#. There's no equivalent note in the 12TET chromatic scale!

It looks a bit... hackish.

That's JavaScript for you. In the works is a mobile version as well as a much fuller-featured OS X version. Keep checking!

OH MY DEITIES YOU ROCK SO HARD HOW CAN I REACH YOU TO THANK YOU? Or, I want to tell you how terrible a person you are; how can I point this out to you?

If you have comments, questions, scale requests, anything of the sort, please feel free to email me at webmaster@offtonic.com!