Signal Amplitude, Amplification and Attenuation in HTML5/JavaScript



The amplitude of a signal is the power at any given time. In the context of an electric signal, the top of the graph is a positive voltage and the bottom negative. In the context of a sound in air, the top is high pressure and the bottom low pressure.

Amplitude was briefly mentioned in this post about sine waves. Let’s look at one of the graphs from that post again.

The graph shows a sine wave in the time domain so the Y-axis is the time the X-axis is amplitude. We can find the amplitude at any point by following the wave horizontally until reaching that specific time and then checking where this point is in line with the Y-axis.

This graph does not have a scale on the X-axis. It just shows a sine wave completing 2 full cycles.  The Y-axis ranges from -1 to +1 because that is the range of results from the sin function, but it also doesn’t have an actual unit.

The graph is divided into 8 sections horizontally. The first 4 and the last 4 sections are identical because the wave is repeated. For each of these cycles, you can see that the maximum positive amplitude on the curve is on the first vertical line. The curve then intercepts the X-axis on the next vertical line (in the middle of the cycle). The minimum amplitude is then on the 3rd vertical line.

Amplification and Attenuation

Amplification is an increase in power applied to a signal constantly, rather than the power at a particular time. Amplifying a signal affects the amplitude.

An example of this power increase is when pressing up on the volume rocker on the side of your phone. (I managed to keep modern and not write about the volume dial on a Hi-Fi). The power of the signal from the source stays the same but in the context of the output, it has more power – thus sounding louder.

Attenuation is the opposite of amplification, the process of decreasing the power of a signal.
Electronics/signal processing domains use these words but in the context of sound engineering other words are more frequently used. Gain, volume or loudness is more common when talking about the actual sound. Amplification is still a common word because amplifiers (or amps) are the piece of kit used to make electric guitars, car stereos, and Hi-Fis loud.

Amplification and Attenuation in Sound Engineering

The image below shows a mixing desk (also called mixing console or just mixer). It has many sliders on it which are known as faders. The faders control the gain for each sound, or group of sounds, within a mix e.g. guitar part, piano, etc. When mixing a song, the engineer adjusts the levels until the mix sounds how they want it to. Reducing the volume of the background sounds and increasing the volume of the foreground sounds, like the vocals, to give them more presence.

These gain controls can attenuate or amplify the sound. There is a zero line near the top of the range of the fader where the signal in the mix is the same power as it is received by the mixer. Above that line, the signal will be amplified and below the line, it will be attenuated. The point at the very bottom of the fader attenuates the signal to nothing so the signal is not at all present in the mix.

The faders are the black things starting from just left of middle bottom going upwards at around 1 o’clock. Each of fader can be pushed back and forth along the black line (at around 10 o’clock). – That is actually away from and towards the engineer when they are looking at the desk.
Gain/amplification can take place at any point after generation of a signal until the time it is converted into sound. Each of these gain controls on the mixer is the last step before it is all ‘mixed’ together, meaning just before it is converted into sound (there are exceptions here but this explanation will do for now).

How does it work?

There are many different types of amplifiers including valve and magnetic which have different implementations all but serve the purpose of receiving a signal and increasing its power.

Magnetic amplifiers are like transformers which are found in many other places in electronics. A very common place is in the wall adaptor of electrical equipment. The voltage from the mains is 100v/230v/240v (depending on where you are), which is far more than required by most consumer electronics. ie. a laptop. The transformer is usually in a block somewhere in the cable and it attenuates the voltage from the wall socket to a usable voltage for the appliance.

Gain in Action

The demonstration below shows the sine wave signal again but this time it has a slider to control the gain.

As you can see, the sine wave gets squashed vertically as the gain decreases. The wave eventually decreases until it is no more and only a flat line is left. The flat line signal has no amplitude so there would be no sound.
Notice that the features of the wave discussed earlier (maximum amplitude, intercept and the minimum amplitude) still occur in exactly the same places. Crossing the zero line, the positive and negative peaks all take place at exactly same pint in time as they did before, albeit closer to the zero line. This is a simple sine wave but no matter the shape of the wave, these rules would apply.

The range of the gain, in this case, is 0 to 1. To achieve the gain we multiply the signal by the gain value. Multiplying by the full gain of 1 results in exactly the same value so the signal is unaffected. Multiplying by the minimum of 0 will always result in 0 at any point so the signal will be a flat line. The values in between will affect the signal somewhere between these extremes.


Below is the visualiser created for this post.

I will mention again that these demonstrations are running in Iframes so click the link here if you experience any performance issues.

Clicking/touching the visualiser screen applies different levels of gain to the signal. The gain ranges from 0 at the bottom of the visualiser up to 2 at the top.  The current gain is displayed to the right of the stop button. The red wave is the input signal and the blue wave is the signal with the gain. The input signal has already been attenuated so that the gain factor of 2 does not cause any distortion.

Try using the fit checkbox so you can see the difference in the waves when zoomed in and out.

Change Log

  • Changes to the visualiser to support mobile devices
  • Visualiser refactoring
  • Visualiser mouse/touch controls
  • Amplifier signal processor
  • Changes to sine wave graph demonstration to support a gain control


Source Code (click to expand)

Scripts/index.js (For the visualiser)

Scripts/sineGraph.js (For the sine wave graph)














Leave a Reply