These two interactive pianos were commissioned by Arabella Voice Studio to illustrate vocal registration concepts for students. They are written entirely in CSS for speed and ease of use.

The biggest challenge that I faced in creating this was to figure the exact placement and size of multiple layered elements in a way that was resizable relative to each other. To tackle this I determined the percentage of width that each key takes up of the whole piano. Then when I created the tabs for each section of range I determined the total number of keys- or percentage of the whole- that each tab must be from the left as well as the percentage of width.

In this regard the project was painstaking and tedious, but I am pretty happy with the results none the less.

High Voice

Directions: roll over each tab below to see where each vocal style falls on the piano and a description of each.

Vocal Fry/Subchest

M0 Vocal Fry: A0-G3

Chest Voice

M1 Chest Voice: C3-C5

Chest Dominant Mix

Chest dominant mix: B3-F5

50/50 mix

50/50 Mix: E4-B5

Head Dominant Mix

Head Dominant Mix: B4-Eb6

Head Voice

M2 Head Voice: E4-Bb6

Flageolet

lM3 Flageolet: E5-E7

Whistle/Suprahead

M3 Whistle Voice: B5-C8

Low Voice

Directions: roll over each tab below to see where each vocal style falls on the piano and a description of each.

Vocal Fry

M0 Vocal Fry: A0-G2

Chest Voice

M1 Chest Voice: B1-G4

Chest Dominant Mix

Chest Dominant Mix: Bb2-Bb4

50/50 mix

50/50 Mix-Eb3-Eb5

Head Dominant Mix

Head Dominant Mix: Bb3-Bb5

Falsetto

M2 Falsetto: E3-E6

Flageolet

M3 Flageolet: E4-F6

Whistle/Suprahead

M3 Whistle Voice: E5-C7