The Sum of Sines in HTML5/JavaScript

So far this series has focused on sine waves. The sound of a sine wave is not very interesting but they are very important in all forms of signal processing. As discussed previously, a sine wave signal in the time-domain has only one frequency. So, every signal is made up of 0 or more sine (sinusoidal) waves. In the context of audio, this means that all sound is a composite of different sinusoidal waves. These sinusoidal waves have different frequencies, amplitudes and they can also have different phases. This applies to recorded songs, voices, music, and any other audio.

Any number of signals can be combined together to make another signal. Sine waves are combined to make different waveforms and manipulated to create rich timbres. This is one way that synthesiser work and will be addressed in a later post. Rich timbres, like those from a synthesiser or a musical instrument, can be combined to make a more complex composition like a recording of an orchestra. When sound engineers mix music they may have instruments on different tracks/channels so that they can process each recording individually (we can think of a track/channel as one signal although it could be a number of signals, eg. the left and right channels of a stereo mix). Once the engineer is happy with the mix then it is ‘mixed down’ to a single track so that it can be played on a CD, MP3, etc.

Summing Sines

To combine signals together their amplitudes are summed. The amplitude of the signal at any given time is the sum of the amplitudes of its constituent signals. Pretty simple, right? This process is the same when combining complex signal (like when a sound engineer performs a mix-down) or when combining simple sine waves. What is special about the sine waves is that every signal can be broken down into units of sinusoidal waves.

The following demonstration shows how signals are summed together to make a single wave. Sine waves are used in the demonstration to keep it simple and show the effect of combining signals, but more complex signals could have been used instead.

The red, blue and green waves are all sine waves with the gain and frequency set on their respective controls. The thick black wave plots the sum of the other 3 waves. This means that at any point in time (X-axis) the amplitude of the composite signal is the sum of the amplitude of the other 3 signals.

Pressing the play button will play the sound of the composite signal. The actual composite signal data is used for the audio buffer to prove that the signal is composed of the 3 individual frequencies, as expected.

You can adjust the frequencies and gains of the waves to see it affects the composite signal. There are 4 presets which affect the frequencies and gains of each wave. These specific presets showcase different properties of the composite signal and are discussed below.

The available frequencies of each wave fit neatly into the graph so that the buffer can be easily repeated. Note that not all frequencies would fit into the graph like this.

You can see that the default settings show a combination of 3 randomly selected waves. The resulting wave no longer looks much like a sine wave. It looks more like a wave from the visualiser of an actual audio clip. This gives you an idea of how different audio is actually just a number of different waves combined.

Preset 1

All 3 individual sine waves are at the same frequency. This means the frequency of the composite signal is also the same frequency but, since it is the sum of the other 3, it is more powerful. We can see that the frequency is the same because the combined wave follows the same sine wave shape and crosses 0 in exactly the same places and the peaks and troughs are in the same places. So summing identical signals means that the signal will have the same frequencies at the same points in times but the composite output will be an amplified signal.

Preset 2 & 3

Only 2 signals are used for these 2 presets, the other has no gain. To start with, the combination acts like preset 1 and amplifies the signal. The 2 signals become increasing out of phase until they are 180 degrees out of phase and so basically cancel each other out. They then start to come back into phase and meet again at which point this cycle repeats. Preset 2 performs this cycle once per graph and preset 3 repeats it several times.

Preset 4

This preset shows the different between the effect of low and high frequency on the combined signal. The combined signal starts with only a high-frequency sine wave (number 2) present. Number 1 and 3 sine waves are low frequencies but have no gain, and so do not effect the combined signal. Adjust either of these gains and observe the affect on the signal.

Change Log

  • Changes to the sine wave graph to multiple configurable waves
  • Modularised volume warning

Source Code (click to expand)

SumOfSines.html


Scripts/sumOfSines.js


Scripts/com/littleDebugger/namespacer.js


Scripts/com/littleDebugger/daw/audioContext.js


Scripts/com/littleDebugger/daw/volumeWarning.js


Scripts/com/littleDebugger/daw/dsp/generator/sineWave.js


Scripts/com/littleDebugger/utility/ui/controlHelpers.js