Sound Wave Simulation

Prompt

Generate the code for a self-contained, complete, and embeddable simulation in html, css, and javascript that middle school students can use to learn about sound waves, frequency, pitch, and amplitude of waves. Include a slider for frequency (pitch) and amplitude (volume). Animate the waves from a speaker to show how increasing the frequency increases the pitch and increasing the amplitude increases the volume. Show the speaker emitting animated waves. Show on the frequency slider the Hertz of the wave beginning with 20 Hz and extending to 20,000 Hz. Add a user selection for sine wave, sawtooth wave, and square wave. Include a volume slider. Play the tone at the associated pitch. Use a navy blue, white, black, and gray theme.

Iteration

Make the waves in the animation white instead of gray to make them more clearly visible. Add a play button to play the pitch in the animation.

Iteration 2

Remove the Start Sound button from the top, but leave the Play Pitch button.