Formants
The above applet demonstrates the production of vowel sounds by the amplification of partial tones near formant frequencies. The top slider allows adjustment of the frequency associated with the speaking or singing of the simulated vowel sound. The actual waveform being constructed (before application of the formant resonances) is in this case a sawtooth wave. The second and third sliders allow adjustments of the first and second formant frequencies, centroids of frequency ranges that receive significant amplification; in this case by direct amplification of the partial tones; in the case of a real voice, by resonances of the vocal cavity associated with its shape.
By adjusting the values of the two formant frequencies, you can hear audible variations in timbre associated with different vowel sounds, and see these variations in a cartoon representation of the sound spectrum (the plotted curve).
Numerical values for the formant frequencies associated with particular vowel sounds can be found in the formant article on Wikipedia.
Note the geometrical point that when the singing frequency is low, the harmonics clearly trace out the shape of the resonance curve, giving precise locations for the two bumps. When the singing frequency is high, the harmonics are spaced much farther apart, making it harder to see, visually, precisely where the resonance peaks are. This is associated with the fact that vowel identification is generally considered more difficult at high frequency. Vibrato (which can be very roughly simulated here by jiggling the singing frequency slider back and forth over a short distance) helps with this identification.
The visualizations above made use of JSXGraph, an extremely useful JavaScript library for interactive plotting, and Gibberish, a wonderful digital signal processing engine.
The visualization is a bit computationally intensive. I find it works best on an actual computer (as opposed to a mobile device), in Google Chrome.