The music theory content can be found at Music Fundamentals on the Web.
The beginning task for Tone.js is to play a single note. This is similar to playing a single note on a piano for the first time. As a user we can supply the note name (or frequency) and also set the tempo, volume and duration of the note. It's difficult to get a sense of tempo with a single note however notice that if you compare the duration of a whole note at tempo 60 with the duration of a whole note at tempo 120 they will be in a 2:1 ratio. Alternately, if you keep the tempo the same but change the duration value you'll hear the various relationships of the durations to each other.
The default pitch of A4 is equal to 440Hz, try typing in 440 to verify. Tone.js synthesizers can accept either a frequency value or a lettername/octave number combination. (i.e. A4). Note that the octave changes at letter C (not letter A). One after another type in A4 then B4 then C4. Notice that C4 is lower than the other notes. If you want to ascend from B4 you go to C5. Tone.js understands sharps and flats also, type in A#4 or Bb4 (same note, different name, i.e. enharmonic equivalents)
Type in some frequencies. The standard tuning frequency for orchestras is 440Hz (A4). The unit Hz is an abbreviation for Hertz which is a measurement of a sound's waveform in cycles per second. The following frequences are deemed by some to have magical qualities: 396Hz, 417Hz, 444Hz, 528Hz, 639Hz, 741Hz, 852Hz. Type these in, do you feel the magic? (don't type in "Hz", enter the numbers only)
Give yourself a hearing test. Can you hear frequencies at 15000 or higher? Can your sound system play them? (I can't hear 15000Hz anymore; ear damage from years of Rock music). I can hear 12000 but my hearing starts fading at higher frequencies. Tone.js provides a free hearing test.
A script tag to Tone.js is required on the page. The main function for this page looks like this:
function playIt(){
var osc = new Tone.OmniOscillator().toDestination();
osc.frequency.value = document.myForm.noteList.value;
osc.volume.value = = document.myForm.volume.value;
Tone.Transport.bpm.value = document.myForm.tempo.value;
var duration = document.myForm.duration.value;
osc.start().stop("+"+duration);
}
NOTE: The values shown on the volume menu are the real values that are assigned to osc.volume.value. Of course most volume controls will display values like 'min' to 'max' or 1 to 10 (or maybe 11). This type of display could easily be achieved as the <option> tags (which create the menu) have a value attribute (i.e. -10) that is independent of the shown text which can be something completely different. For instructional purposes, I've choosen to show the real values.
For our music theory concerns we are using descrete pitches from the 12 tone system. But Tone.js can play ANY frequency and easily play in between the half steps. Just as a blues singer will bend the pitch, Tone.js has the microtonal capabilities of the voice or slide guitar. The Tone.js examples pages contain an interesting use of fluid pitch changes.