Hi there!
This interactive guide introduces and explores waveforms. We'll cover how to read these funny shapes, go over the fundamental physics of sound, learn how it relates to music and harmony, and discover how to build complex tones from simple ones.
This guide is aimed at a general audience–no prior knowledge is required. It may be of particular interest to musicians, producers, and aspiring audio engineers, but it's designed to be accessible to everyone!
This guide deals with audio waves, and so it's beneficial to be able to hear stuff. This way, when you change parameters, you can hear the difference it makes.
Because nobody likes autoplaying sounds, the volume is currently muted. You can control it using the "volume" widget in the top-rightbottom-left corner.
You can also use keyboard shortcuts! The numbers 0 – 9 control the volume. You can also press M to mute or unmute the audio.
Try it now by pressing M on your keyboard!
You should hear a constant bass tone.
First, let's take a closer look at the waveform belowto the left.
We're looking at a graph, a data visualization. The blue line is the data we're graphing, and it represents a sound wave. Specifically, it's telling us about the wave's displacement, and how it changes over time.
Let's dig into what that means.
The horizontal line, our X axis, represents time.
In this case, our graph is showing a 1-second interval.
When you pluck a guitar's string, you cause the string to wobble back and forth. If you had a zoomed-in, slow-motion camera, you'd be able to see that it oscillates from side to side, like a clock's pendulum.
If you had the world's smallest ruler, you could measure the distance that the string moves from its default, resting position.
When the guitar string vibrates, it causes a chain reaction with the air molecules around it; they all start vibrating as well, radiating outwards.
Our Y-axis measures displacement of air molecules. It's a measure of a sound wave's loudness; a lightly-strummed guitar string only vibrates a little bit, so the displacement would be tiny. If you pick the string, pull it back an inch, and release, the string's displacement would be much higher, which would create a much louder sound wave.
The waveform belowto the left shows a single oscillation of a sound wave. It starts by displacing the air molecule in the positive direction by '1', and then in the negative direction by '-1'.
Waveforms are abstract representations of sound waves. While a real sound wave might displace an air molecule by 4 nanometers, we tend to use abstract measurements when dealing with waveforms.
This is where amplitude comes in. It measures how much a molecule is displaced from its resting position. In our case, we're measuring it from 0 (silent) to 1 (the maximum amount displaced).
Amplitude can be thought of as loudness. The more the air molecules are displaced, the louder the sound seems to us.
Let's make this interactive! Use the amplitude slider belowabove the waveform to see how changing the amplitude of the waveform affects the graph.
Try setting it all the way to 0, and notice how the line flattens out. 0 amplitude means that it's completely silent.
The waveform has been updated so that it repeats twice in the available time (or, phrased another way, it's twice as fast).
The waveform we're looking at is periodic; this means that the waveform can be repeated to produce a constant tone. When you unmute the sound, notice how the sound is totally consistent; it doesn't change from one second to the next. Periodic waveforms allow you to produce constant sound by repeating the waveform over and over. This differs from, say, a piano, where the quality of the note changes over time.
Frequency is a measure of how many times the waveform repeats in a given amount of time. The common unit of measurement for frequency is the Hertz, abbreviated as "Hz", which represents the number of repetitions per second.
Because we know that this waveform graph shows a 1-second interval, we can deduce that this wave is oscillating at 2Hz.
Frequency is similar to "pitch". The faster a wave repeats itself, the higher the pitch of the note.
For example, when a singer sings an "A4" note (The "A" in the middle of a typical piano), their throat vibrates at 440Hz. If their voice raises to a "C5" note, 3 semitones higher, their throat would vibrate at ~523Hz.
This phenomenon doesn't just happen with music. Think about a car's engine, and how the faster it "revs", the higher the pitch. The same can be said for a hand mixer, or a drill. Any physical object that makes noise doing the same thing hundreds or thousands of times a second should have a discernable pitch.
Not all sound is periodic, though. For example, white noise—the sound of static, or waves crashing on the beach—is just a uniform distribution of audible frequencies. Because it isn't periodic, it doesn't have a discernable pitch.
Try tweaking the frequency with the frequency slider.
Don't forget to enable sound with the M keyvolume control above to see how frequency and amplitude affect the resulting sound!
In Part 1, we scratched the surface of how sound works, by thinking of displacement in terms of a vibrating guitar string, and the effect it has on sound molecules. Let's see if we can unravel this a bit more.
The air around us is filled with molecules. When you play a sound out of a speaker, the speaker vibrates really quickly. That vibration moves through the molecules in the air, like a chain reaction, until it reaches your ear and is processed by the brain as sound.
Imagine that each dot in this grid is an air molecule:
Each dot is oscillating back and forth by a displacement controlled by the amplitude, and with a speed specified by the frequency.
Because this is a chain reaction, you can see the effects of the vibrations moving from left to right, but this is a bit of an optical illusion: the air molecules themselves aren't flying across the space, they're just vibrating. But that vibration moves through the field.
The waveform we've been looking at belowto the left shows the oscillation of a single air molecule. Compare the blue dot added to the waveform graph indicating the current displacement with the first column of air molecules in the grid below:
Because our waveform graph is just a representation of the change in displacement over time, it maps directly to what's actually happening with the air molecules!
If you haven't already, try fiddling with the amplitude slider and frequency slider to see how it affects the air molecules in the grid.
So far, we've been tweaking the amplitude and frequency of a waveform, but we've been using the same waveform shape all along.
The shape of a waveform refers to the curve of the waveform line; in other words, how the displacement changes over time.
We've been looking at a sine waveform. Its origins come from trigonometry, and it's known as the fundamental waveform.
This is because it's pure: there are no "side effects". When you play a 440Hz sine wave, the only frequency you hear is 440Hz. Sine waves are the "vanilla" wave; it doesn't have any bells or whistles.
When a waveform has "side effect" frequencies, we call them harmonics.
To help us understand how harmonics work, we need a way to represent the additional frequencies. Let's use a bar graph. Here's the sine wave's graph:
This graph is pretty boring. Because the sine waveform is the fundamental waveform, it doesn't have any harmonies! What you see is what you get. A 1Hz wave plays a 1Hz tone, and that's it.
Woo, our first non-sine waveform!
It looks quite a bit like the sine, but with the curviness removed. Instead, straight lines connect in triangle-like shapes.
What effect does this have on the way it sounds? If you haven't already, go ahead and enable sound using the M keyaudio controls above, and scroll between this and the previous section to hear the difference.
Notice that the sound is a little "brighter"? It doesn't quite sound so muffled? This is because of harmonics.
Harmonics are additional frequencies that are created by certain waveforms. We'll learn more about why that is soon, but first, let's graph these additional harmonics:
Harmonics are always a multiple of the root frequency. Different waveforms have different selections, but they always follow the same pattern:
Triangle waves only have odd harmonics. That means they have the root note, 3rd harmonic, 5th harmonic, 7th harmonic, and so on. These harmonics "taper off" as you get further away from the root frequency.
The square waveform is arguably the most extreme of the common periodic waveforms. It jumps between the highest and lowest possible values. It's a binary wave: it's either +1 or -1.
The square waveform features exactly the same harmonics as the triangle waveform: Every "odd" harmonic (3rd, 5th, 7th, etc). The difference is that the square wave harmonics don't "fall off" as much the further you get from the root frequency. Look at how much louder the higher-frequency harmonics are for square waves:
This is plainly noticeable in the sound: squares sound much "brighter" than triangles.
Finally, we have the sawtooth. Named after the blades of a saw, This waveform exhibits the linear rise of the triangle waveform with the hard drop of the square waveform.
In terms of sound, it's vaguely similar to string instruments: when you run a bow across a violin's string, the friction between the two items causes the string to slip and catch, which causes the string to vibrate in a sawtooth-like pattern. Of course, real instruments produce far more complex waves than these basic waveforms!
In terms of harmonics, sawtooth waveforms have additional frequencies at every multiple of the root frequency, unlike triangles and squares which only have odd harmonics.
In the previous section, we learned about how different waveforms have different harmonics, but it's totally unclear why that's the case. For example, why does a square wave have all those extra tones when we're still just oscillating at a single frequency?
To make sense of this, there's a surprising truth about waveforms: all of them can be built by just layering a bunch of sine waves on top of each other.
At first blush, this probably doesn't make any sense. How can sine waves be combined to make drastically-different waveforms like square or sawtooth?
The answer lies in how waveform addition works.
The waveform graph we've been looking at now shows two waves:
Put another way, this second wave is 3 times as fast, but at one-third the amplitude.
If you've ever used audio editing software, you've seen how a full song—which is comprised of many different instruments and sounds—creates a single waveform. What we're looking at over there is not a waveform yet: we have to merge the two lines to form one.
This is known as waveform addition. Let's try to understand it in real-world terms.
Remember, sound is just the vibration of air molecules. If you play 2 distinct tones, they both cause the air molecules to vibrate. A game of tug-of-war has 2 people pulling on a rope, and the displacement of the rope is the result of both people's effort.
So, we just need to "add" the two waveforms together to get our end result. How does the addition work? It's arithmetic: imagine the waveform graph as a bunch of individual points. At each point, you simply add the individual displacement values. The new set of points is our new single waveform.
Use the new Convergence slider to watch as the two lines are added together.
Notice how it kinda looks like a square wave, if you squint?
You might be wondering where the values for that first harmonic came from. Why did we choose these waveforms specifically?
The answer is that we reverse engineered the square waveform. Remember this chart, showing the harmonics for a square wave?
The two waves we're graphing are the 2 first waves in this chart!
The more harmonics we add from this chart, the more our waveform starts to look like a square wave. Use the new # of Harmonics slider to change the number, and see how it affects the converged line.
Something counter-intuitive about waveform addition is that it doesn't always make the resulting sound louder.
To demonstrate this more clearly, first we have to learn about another waveform property: phase.
Simply put, phase is the amount of offset applied to a wave, measured in degrees. If a wave is 180 degrees out of phase, for example, that means it's delayed by 50% of its period.
Our waveform graph on the right has been updated to show two identical waves in terms of amplitude and frequency. Try adjusting the new phase slider to see how phase affects the second waveform, relative to the first.
Try adjusting the convergence slider to see how the phase of a waveform affects how loud the resulting wave is.
Another way to think of waveform addition, perhaps a more concrete way, is to think musically. After all, when you play a chord on the piano, you're really just adding 3 waves together!
The difference is the scale. With harmonics, the additional "notes" are all multiples of the root frequency, whereas western music divides an octave into 12 intervals.
Just for fun, here's what a C Major chord looks like, built out of 3 sine waves.
A fundamental truth about sound is that there are only 2 variables: time and displacement. We can create any sound imaginable by simply displacing air molecules by the right amount at the right time.
Both the harmonics associated with certain waveforms and the additional waves needed to form chords are just the math needed to produce the right displacement at the right time.
An audio wave is the vibration of air molecules, which is how sound travels. A waveform describes a wave by graphing how an air molecule is displaced, over time.
Amplitude is the strength of a wave's effect; the higher the amplitude, the more the air molecules are displaced. This also translates into loudness for the human ear; increasing a wave's amplitude will increase how loud it seems to us.
The most common periodic waveforms are the sine, triangle, square, and sawtooth.
These waveforms are said to be periodic because the wave they represent can be repeated to produce a constant tone. The faster the wave repeats, the higher the pitch of the sound.
Different waveforms have different harmonics. A harmonic is an additional frequency created by the wave. The sine waveform is unique in that it doesn't have any additional harmonics; it is the fundamental waveform.
To understand why certain waveforms have harmonics, we can attack the problem from the opposite end. Because the sine waveform is the fundamental waveform, it can be used to approximate all the other periodic waveforms, by just adding additional sine waves at the appropriate harmonics, and at the appropriate amplitude levels. In essence, a square wave can be thought of as an infinite number of sine waves, all happening at very specific frequencies and amplitudes.
Thanks so much for playing. I hope it was worthwhile and educational!
Let me know what you think on Twitter or by email. I'm especially keen to hear if you have suggestions for other audio concepts you'd like explained this way!
This project was created with React. View the source.
This project was heavily inspired by R2D3's amazing visual intro to machine learning.
Warm thanks to Pat McNeil, instructor at Vanier College, who taught me all this stuff originally, and Matt Dunn-Rankin, co-worker at Khan Academy. Pat's deep audio expertise and Matt's keen eye for pedagogy greatly improved this exploration.