This demo shows the FoamTree API elements you will likely need to use when building an interactive visualization or application. It also shows how to integrate other Web APIs into your FoamTree visualizations.
Each of the twelve notes of the scale is a cell, split into its octaves, from the low C2 to B6. The cells light up with the sound, and the cell in the middle names the chord: play with the mouse or the keyboard, listen to a Bach prelude, play an audio file or sing into the microphone.
Click a note to play it, or a note's name to play its major chord. The computer keyboard plays the notes from C4 to E5; Z and X shift them down and up.
Why does one note light up several cells? A real note also sounds its overtones: the octave above it, the fifth above that, two octaves up, and so on.
AnalyserNode that measures the loudness of each note's frequency in the sound.
A small synthesizer, with a few overtones, plays the notes and the prelude.
groupColorDecorator to set the
lightness of each cell from the loudness of its note, and calling
redraw(true, groups) on each animation frame for just the
cells whose loudness changed.
stacking with description groups for the
note names.
onGroupClick plays the clicked note, and its
default action, the selection, is prevented, along with the zooming and the opening of groups.