Circle Piano and Tones Explorer
© Adapted from Mike Bostock's ArcPiano, the Tones library by ©Keith Peters and Vexflow by oxfe
Introduction
This page is an adaption of the great work done by Keith Peters on his Tones library, the amazing Mike Bostock and his JavaScript piano library using Web Audio AND the beautiful music engraving of oxfe with VexFlow music notation. The attempt here is to provide a toolkit for exploration of the properties of both sounds and music, and even to offer a platform for perhaps composing and playing something new. GeoGebra is linked to offer a graphical view of what is happening, and BLE is also provided if you have a TI LaunchPad available! The introduction that follows comes directly from the Tones Library GitHub page - I could not improve on his efforts!
The Web Audio API is pretty amazing. You can actually synthesize audio with JavaScript right in the browser. The only problem is that it is pretty low level and not exactly intuitive to work with. This library is meant to make it as simple as humanly possible to create pleasant sounding musical tones.
The tones api is drop dead simple. One main method: play.
The play method can be used in a few different ways:
Play a tone at a specific frequency.
Play a named note in the default 4th octave.
Play a named note in a specific octave.
Examples:
tones.play(440); plays a 440 hz tone
tones.play("c"); plays a C note in the 4th octave.
tones.play("c#"); plays a C sharp note in the 4th octave.
tones.play("eb"); plays an E flat note in the 4th octave.
tones.play("c", 2); plays a C note in the 2nd octave.
Named notes are case insensitive. "c" is the same as "C".
There are also a few properties that affect the sound of the tone played. Set these before playing a tone and they will affect all future tones played.
type : this is the wave form, a string of one of the following: "sine", "square", "sawtooth" or "triangle"
attack : sets the attack of the envelope, or the time that the sound takes to reach full volume.
release : sets the release of the envelope, or the time it takes for the sound to fade out.
Attack and release are numbers which should generally be in the range of around 1 to 300. A low release, and mid-range release will give a bell sound. A long attack and release will sound more like a flute. Combined with different wave form types, this allows you to create all kinds of unique sounds.
Note that attack and release values do not represent discrete times. But roughly speaking your sound will last about 10 times the total of these two in milliseconds. For example, an attack of 100 and release of 200 totals 300, so the tone will last around 3000 milliseconds or 3 seconds before completely fading out.
There is also a getTimeMS function. This returns the current time reported by the audio context, which keeps a very accurate internal timer. Some of the examples use this to set up a sort of sequencer.
It goes without saying that this library will only work in browsers that support the Web Audio API, which includes Chrome, Firefox and Safari (I think), but not Internet Explorer.
Take your Web Audio exploration to the next level, and play with the Arc Piano below from Mike Bostock.
Here the notes you play on the ArcPiano are represented as frequencies through the live graphing of GeoGebra and as musical notation using VexTab. These notes can be played back using the Tones library, shared with others via email, web page or QR Code, and even sent via BLE to a connected LaunchPad board!
Learn to create your own interactive web pages with Live Mathematics and STEM on the Web.
If you have any questions or would like to share your experience with this utility, please drop me an email!
Create your Own Sounds
Choose a wave form for your tone...
Compare the sound of our modern (well-tempered) scale (based upon a geometric sequence) to that of one based upon the harmonic series of Pythagoras...
My Circle Piano
