Play Major Scale

The music theory content can be found at Music Fundamentals on the Web.

We now need to play a sequence of notes we call a Scale. Our first scale is the major scale and we'll start in the key of C as our first example. Perhaps contrary to one's expectation in the study of music we don't start with the letter A. The musical language is "C centric", which means that C is the starting point of music studies, and the starting point for numbering the different octaves in the musical range of notes. The notation system is visually centered on the note C (middle C) and in a vertical mirror image the C notes are landmarks in the staff layout. (two ledger lines above the treble clef staff is C, two ledger lines below the bass clef staff is C.) So we will begin with creating a C scale.

Tone.js provides several way creating streams of notes. The Tone.Event class and it's descendants are useful for playing scales.

For our purposes on this page we'll use Tone.Pattern. We can create an array of notes for our major scale and Tone.Pattern will play them one after another. It can additionally plays those notes in a pattern such as upDown, downUp, etc. The full list of patterns is shown below.

"up" - cycles upward
"down" - cycles downward
"upDown" - up then and down
"downUp" - cycles down then and up
"alternateUp" - jump up two and down one
"alternateDown" - jump down two and up one
"random" - randomly select an index
"randomWalk" - randomly moves one index away from the current position
"randomOnce" - randomly select an index without repeating until all values have been chosen.

The alternateUp and alternateDown patterns are different than the way most musicians would play those patterns. We'll learn how to make our own custom patterns in later lessons.

We can use an array for the note values of a major scale. The array uses bracket notation to define the beginning and end of the array. The note values inside the array use quotes and each value is separated by a comma.

This is known as an array literal. You could write one for each key. Here's one for the key of Eb major.

Tone.js provides several ways to play these scale. We'll use the Tone.Pattern method. You can pass the Tone.Pattern function an array of notes (our major scale) and it will use a callback function to play those note one after another. Below is the code for playing the C major scale. The code for playing the Eb major scale is similar but with a different scale array defined.

You can click a play button more than once and you'll hear the scale play in harmony with itself. Set the pattern to random and click a button a couple of times to hear some interesting random harmony. Or click both the C and Eb buttons to hear the scale being played in two keys at once.

It wouldn't take too long to write out all of the major scales like we did for C and Eb major. But a better method is to write some code that will create the major scales using the rules of music theory.

A very easy way to work with musical pitches that can be played on a keyboard is to use MIDI numbers. The MIDI system assigns numbers to all of the keys of a keyboard. MIDI's (theoretical) keyboard has 128 keys! Middle C is assigned with the MIDI number of 60. We can use a literal array similar to the previous arrays but use numbers instead of pitch values to define the interval structure of a major scale.

Now Cmajor contains the MIDI key numbers for a C major scale. But Tone.js doesn't speak the language of MIDI key numbers, they need to be translated into pitch-octave names or frequencies. Fortunately an easy solution is available by using an array of pitch-octave names the same size as the number of MIDI key numbers. (This solution comes from the book Making Music with Computers by Bill Manaris and Andrew R. Brown, highly recommended) The MIDI number is used as an index for this array and the value at that index is the pitch-octave translation that can be used with Tone.js or for any MIDI key number to pitch-octave translation

Now myScale contains the pitch-octave notes suitable for use with Tone.js. This will play the correct sounds for the C major scale and it will also have the correct names listed in the array. But if you look at the MIDI_NUM_NAMES array you'll notice there aren't any flat names used. All of the different 12 tones per octave sounds are in the array but all of the 'black keys' are named using sharp names.

If all we want to do is to play the correct sounds and don't care about note names, this approach will work for any key including the key of Eb. We simply change the starting note from 60 to 63 (Eb is 3 half steps above C).

We have a problem with the spelling of the scale. The second rule listed above is being broken and since the MIDI_NUM_NAMES array doesn't have any flat names this method can't be used to get the correct names for major scales that use flat names. In order to get the correct name we need to have the enharmonic equilvalents as choices (i.e. D# or Eb). One approach is to have another array that contains the missing names in it. In addition we need to have an array of the natural letters so that we can keep track of which names are used and which letter name should be used next. We'll address the details of how we can fix this problem in a moment.

But first looking to the future when we learn more scales, we can make our scale creating loop more versatile if we don't hard code in the MAJOR_SCALE formula. But instead allow a different scale formula to be used. A different scale formula could be assigned to myScaleFormula and the loop code could be used without any changes. This change is useful for turning our "scale creation" code into a function.

Here is one strategy for enforcing the second rule. First we'll create two arrays similar to MIDI_NUM_NAMES (but slightly different). These two arrays contain all of the names we need for major scales.

Also we need a new array of the alphabetic letter names used in the music language so can make sure we have the correct letter names for our major scale.

The line of code inside the last loop;

if(MIDI_SHARP_NAMES[myScaleFormula[i] + startingNote].includes(ALPHA_NAMES[(offset+i) % ALPHA_NAMES.length]))

looks a bit complicated. Let's break it down.

The first part MIDI_SHARP_NAMES[myScaleFormula[i] + startingNote] will be one of the pitch-octave names from the MIDI_SHARP_NAMES array. Which one of the MIDI_SHARP_NAMES is determined by the index of that array. That value is the MIDI key number, myScaleFormula[i] + startingNote. So using that index into the array we receive a note name-octave (of type string). On that name we call the string method '.includes()' and pass in ALPHA_NAMES[(offset+i) % ALPHA_NAMES.length]

The index of the ALPHA_NAMES is (offset+i) % ALPHA_NAMES.length. The % (remainder) operator is used so that we don't go outside the bounds of the array. The offset value sets us at the correct starting point in the array, then we increment through the array with the i value. When we divide by the length of the ALPHA_NAMES array our remainder value will be a value within the bounds of the array and the offset gives us the correct starting point. It's a useful pattern that applies later when we create modes from a parent scale.

So we're looking to see if the note name we have in the MIDI_SHARP_NAMES array contains a specific Letter from the ALPHA_NAMES. If not then we check the MIDI_FLAT_NAMES array. One of the two if() else if() statements should be true and we choose our correct name from that array. But if it's still not found, that's an error. We don't want to crash (trainwreck crashes can cause horrible noises emanating from Tone.js), so we'll just add a high note (above the range we're working in) so that we can hear the error if something goes wrong.

Just one small step to turn this code into a function. We have a way to turn a MIDI number into a noteName+octave but it's also useful to go the other direction, i.e. turn a noteName+octave into a MIDI number. One brute force technique is to search through the two MIDI arrays and when you find it return the index of array of the found name. Below is a function that does that translation.

Now that we have the makeScale function, we can use it to create scales that can be played by similar code as earlier hard coded examples. Choose a key and a pattern then click Play Major Scale

After you click the Play Major Scale button you'll see a display of the note names created. These are the names returned from the makeScale function and are used with the Tone.js function shown below. Notice the different spelling for the keys of C#/Db, F#/Gb and B/Cb. Each pair sounds the same but have completely different spelling. This music theory stuff can be tricky.

This completes our first iteration of our scale creation code. We'll see if it can handle some other scale structures in later lessons. Best practice is have all this code placed into its own javascript file but for these demo pages I'm putting the code in script tags within this html page. View source for details.