2020/03/18 – How To Understand a Spectrogram?

This tutorial explains how to understand spectrograms. An original method is proposed to explain how to understand a spectrogram, starting from a spectrum.

Sound engineers and producers know more or less how to understand a spectrum. A spectrum is a curve that is displayed by spectrum analyzer plugins for example. This curve represents the frequencies horizontally, and the amplitudes vertically. The spectrum curve is animated over the time, to represent the changes of the sound currently playing. A spectrum can be used for example to detect a peak of amplitude corresponding to a narrow frequency range.

A spectrogram is a 2D image which scrolls over the time. This image represents the time horizontally, and the frequencies vertically. The amplitude for a given point of the image is represented by a more or less bright color. For high amplitudes, the colors are brighter, and for low amplitudes, the colors are less bright. For example, very high amplitudes will be displayed with colors close to white, and very low amplitudes (silent parts of the sound) will be displayed with colors close to black. Some other color codes are often used, for example hot colors (like red) for high amplitudes, and cold colors (like blue) for low amplitudes.

We will now see how to go from a spectrum to a spectrogram, by using two rotations. The explanation is given in four examples, from a very simple sound to a real world example. Each example shows the explanation step by step.

Example 1: Simple sine wave

Example 2: Sine sweep

Example 3: White noise + low pass filter

Example 4: A real world example (guitar)

Conclusion

Example 1: Simple sine wave

This first example shows how to go from a spectrum to a spectrogram, step by step, with a simple sine wave of 500Hz.

Step 1/6: Spectrum of the simple sine wave. We see a single peak at 500Hz. The peak is not moving because the frequency stays at the value of 500Hz. The spectrum curve represents the frequencies horizontally, and the amplitudes vertically.

Step 2/6: Keeping track over the time. Now, imagine we keep track of the spectrum curves over the time. We have the current spectrum curve in front, and the oldest curves in the background.

Step 3/6: Making rotations.  Now, imagine we look at the tracked spectrum curves from the top. We do this by making a first rotation, getting the frequencies horizontally, and the time vertically. We then make a second rotation, to get the time horizontally, and the frequencies vertically. We still see the amplitude peak at 500Hz, which makes a line over the time.

Step 4/6: Convert amplitude peaks to colors. Now, we can convert the amplitude peaks to colors, and we get a spectrogram! The colors are brighter for high amplitude peaks, and darker for more flat amplitudes.

Step 5/6: Spectrogram with gray color code. We now have a spectrogram. Time is displayed horizontally, frequencies are displayed vertically and amplitudes are displayed as colors. We are using a gray color code. The highest amplitudes are white, the lowest ones are black, and intermediate amplitudes are displayed with more or less bright gray colors.

Step 6/6: Colorize to enhance the view. Different color codes can be applied to the spectrogram. For example a gray color code, displaying colors from black to white, with intermediate shades of gray. Or a blue color code, or else a color code going from cold colors to hot colors. Color codes are useful for highlighting certain details of the sound.

Putting all together: from spectrum to spectrogram. This animation shows all the previous steps in a single animation. We start from a spectrum, keep track of the spectrum curves over the time. We then make the two rotations to see the tracked curves from the top, and to swap the time and frequencies axes. We then convert amplitude peaks to colors in order to get a spectrogram. And finally we apply color codes to the spectrogram.

Example 2: Sine sweep

This second example shows how to go from a spectrum to a spectrogram, step by step, with a sine sweep. A pure sine frequency moves over the time, from lowest frequencies to highest frequencies, and returns to the lowest frequencies.

Step 1/6: Spectrum of the sine sweep. We see a single peak whose frequency changes over the time. The peak is moving because the frequency value sweeps from the lowest frequencies to the highest frequencies. The spectrum curve represents the frequencies horizontally, and the amplitudes vertically.

Step 2/6: Keeping track over the time. Now, imagine we keep track of the spectrum curves over the time. We have the current spectrum curve in front, and the oldest curves in the background. We still see the peak changing, but this time we keep track of the previous peaks.

Step 3/6: Making rotations. Now, imagine we look at the tracked spectrum curves from the top. We do this by making a first rotation, getting the frequencies horizontally, and the time vertically. We then make a second rotation, to get the time horizontally, and the frequencies vertically. We still see the amplitude peak whose frequency changes over the time. We can see that it makes a kind of V pattern. This is something that was not obvious to guess when looking only at the spectrum from Step 1/6.

Step 4/6: Convert amplitude peaks to colors. Now, we can convert the amplitude peaks to colors, and we get a spectrogram! The colors are brighter for high amplitude peaks, and darker for more flat amplitudes. We still have our V pattern, but this time it is displayed with bright colors instead of peaks.

Step 5/6: Spectrogram with gray color code. We now have a spectrogram. Time is displayed horizontally, frequencies are displayed vertically and amplitudes are displayed as colors. We are using a gray color code. The highest amplitudes are white, the lowest ones are black, and intermediate amplitudes are displayed with more or less bright gray colors.

Step 6/6: Colorize to enhance the view. Different color codes can be applied to the spectrogram. For example a gray color code, displaying colors from black to white, with intermediate shades of gray. Or a blue color code, or else a color code going from cold colors to hot colors. Color codes are useful for highlighting certain details of the sound.

Example 3: White noise + low pass filter

Another example to show how to go from a spectrum to a spectrogram, step by step, with a white noise. The sound that is displayed is a white noise with a low pass filter. High frequencies are diminished a lot.

Step 1/6: Spectrum of the filtered white noise. We see a rather flat ceiling with high amplitudes for the frequencies below 500Hz, and we see attenuated amplitudes for higher frequencies. The spectrum curve represents the frequencies horizontally, and the amplitudes vertically.

Step 2/6: Keeping track over the time. Now, imagine we keep track of the spectrum curves over the time. We have the current spectrum curve in front, and the oldest curves in the background. We still see the high amplitudes for the low frequencies, and lowest or almost zero amplitudes for the high frequencies. But this time we keep track of the spectrum curves.

Step 3/6: Making rotations. Now, imagine once again we look at the tracked spectrum curves from the top. We do this by making a first rotation, getting the frequencies horizontally, and the time vertically. We then make a second rotation, to get the time horizontally, and the frequencies vertically. We still see two areas: the low frequencies with high amplitudes, and the high frequencies with low or almost zero amplitudes.

Step 4/6: Convert amplitudes to colors. Now, we can convert the amplitudes to colors, and we get a spectrogram! The colors are brighter for high amplitudes, and darker for lower amplitudes. We still have two areas, but this time they are displayed with bright and dark colors instead of curves.

Step 5/6: Spectrogram with gray color code. We now have a spectrogram. Time is displayed horizontally, frequencies are displayed vertically and amplitudes are displayed as colors. We are using a gray color code. The highest amplitudes are white, the lowest ones are black, and intermediate amplitudes are displayed with more or less bright gray colors.

Step 6/6: Colorize to enhance the view. Different color codes can be applied to the spectrogram. For example a gray color code, displaying colors from black to white, with intermediate shades of gray. Or a blue color code, or else a color code going from cold colors to hot colors. Color codes are useful for highlighting certain details of the sound.

Example 4: A real world example (guitar)

This last example shows how to go from a spectrum to a spectrogram, step by step, with a real world sound. The example sound is a guitar sound. The spectrum is more complex than in the previous examples, and gives a more complex spectrogram.

Step 1/6: Spectrum of the guitar sound. We see a more complex spectrum curve, moving over the time depending on the sound currently played. The spectrum curve represents the frequencies horizontally, and the amplitudes vertically.

Step 2/6: Keeping track over the time. Once again, imagine we keep track of the spectrum curve over the time. We have the current spectrum curve in front, and the oldest curves in the background.

Step 3/6: Making rotations. Now, imagine we look at the tracked spectrum curves from the top. We do this by making a first rotation, getting the frequencies horizontally, and the time vertically. We then make a second rotation, to get the time horizontally, and the frequencies vertically. We see all the changes in amplitude and frequency over the time.

Step 4/6: Convert amplitudes to colors. Now, we can convert the amplitudes to colors, and we get a spectrogram! The colors are brighter for high amplitudes, and darker for lower amplitudes. We still see all the changes in amplitude and frequency over the time, but this time they are displayed with bright and dark colors instead of curves. We can see vertical bright lines corresponding to the attack of guitar chord strums, and smaller horizontal lines corresponding to the moments when the guitar player lets ring guitar chords.

Step 5/6: Spectrogram with gray color code. We now have a spectrogram. Time is displayed horizontally, frequencies are displayed vertically and amplitudes are displayed as colors. We are using a gray color code. The highest amplitudes are white, the lowest ones are black, and intermediate amplitudes are displayed with more or less bright gray colors.

Step 6/6: Colorize to enhance the view. Different color codes can be applied to the spectrogram. For example a gray color code, displaying colors from black to white, with intermediates shades of gray. Or a blue color code, or else a color code going from cold colors to hot colors. Color codes are useful for highlighting certain details of the sound.

Conclusion

In this tutorial, we have seen how to understand a spectrogram, starting from the well known spectrum view. Hope this has been helpful! It is advised to try by yourself with simple sounds in real-time, then with more complex sounds. You will see that spectrograms are not so complicated to understand, and after some tests by yourself you should become comfortable with spectrograms!

This tutorial uses three plugins:

• A spectrum analyzer
• The Wav3s plugin for the 3D views
• The Ghost Viewer plugin for the spectrogram views

BlueLab provides several spectrogram plugins that may interest you:

• Ghost-X: spectrogram viewer and editor
• Ghost: free and functional lite version of Ghost-X
• Ghost Viewer: simple spectrogram viewer optimized for visualization
• Infrasonic Viewer: spectrogram viewer dedicated to infrasounds (very low frequencies)
• Wav3s: free sound visualization in 3D using a waterfall plot view, which is very similar to a spectrogram view