Signal Frequency in HTML5/JavaScript

Frequency is a technical term used to describe the pitch of a sound. Pitch relates to our perception of sound but we can measure frequency. When we talk about the pitch or frequency of sound it is usually in the context of human hearing so they are basically synonymous.

It is challenging to explain pitch in words without relating it to real sounds, so I am hoping that you have a concept of it already. Nevertheless, I will explain it anyway. If you are able to hear then I can tell you that a (big) dog barking makes a low pitch/frequency sound. A bird tweeting makes a high pitch/frequency sound. Those particular sounds were intentionally chosen. Speaker systems often consist of several individual drivers (speakers) for handling different frequency ranges. subwoofers are the speakers that handle the low frequencies  (woof-woof). Tweeters are the speakers that handle the highest frequencies (tweet-tweet).

If you had never heard any sound before then it would be hard to understand pitch. Again, I will explain it. The pitch of a sound ranges from low to high. Low pitch sounds are very calm and mellow and high pitch sounds are frantic. This is a very rudimentary description and not always the case. Although, it does make sense that high pitch sounds seem much more frantic and excited because the number of cycles per second made by a wave is what is actually measured when we talk about frequency. The higher the frequency, the more cycles per second. The lower the frequency, the fewer the cycles. Frequency is measured in hertz (Hz) or kilohertz (kHz), which is 1,000 hertz.

Objects vibrating causes fluctuations in the air pressure which in turn causes sound. The speed of the vibration determines the frequency of the sound. I will use an example of a washing machine to explain this. When a washing machine first starts a spin cycle the drum (appropriately named) spins very slowly. You see the clothes lazily flailing about as it turns and it makes a low pitch sound. As the speed of the spinning increases, you can hear the pitch of the sound increase until it is very high. It will probably also get louder and the clothes will start to look like a blur (some of this depends on the age of your washing machine). The pitch of the sound that the machine makes is directly related to the speed of the drum spinning.


 Hearing Test

The canvas below demonstrates different audio frequencies in the form of a hearing test. After pressing the start button your speakers will emit individual sine waves at frequencies ranging from 20Hz to 20kHz. Notice the frequency of the first and last sine waves that you hear. Check that you can hear the actual tone, not just a click at the end of the tone. The sine wave stops abruptly after 0.8 seconds, regardless of the position within the cycle, meaning it returns to 0 immediately. This wouldn’t happen naturally and the abrupt change in amplitude causes the click. – This will be discussed further in a later post.

This demonstration is actually using the sine wave generator created for this post and not the Web Audio API component, as in my previous post.

If possible, use wired speakers or headphones. A wireless headset that I used during testing did not handle the high range audio very well. I thought there was something wrong with the sine wave generator so I wasted time trying to fix it until I tried it on other speakers.


Are you losing your hearing?

If you are over 25 years of age then the answer to that is probably, yes, but do not be alarmed by this. It happens to the best of us and it is one of the first things in humans to degrade as we age.
How did you do no the test? If you couldn’t hear the full range then don’t worry too much, it might not even be your hearing. There are several other possible reasons including the frequency response of your audio equipment.
The spectrum of human hearing is said to be from 20Hz to 20kHz (20,000Hz). Apparently, babies can hear this high pitch but most adults can not. There is very little ‘useful’ information for us in frequencies above about 9 or 10kHz. – If you can hear frequencies up to there then you are fine.

If you can’t hear the low 20Hz signal then it’s very likely your speakers that can not reproduce such low frequencies.

On that hearing test, I can hear up to between about 13,000Hz and 15,000Hz depending on the speakers that I use and the loudness.


Hearing Degradation in Adluts

The chart above shows part of the spectrum of human hearing and how that degrades as we age. The chart is from this page. I can’t find the original source of this data but the chart looks similar to others that I have seen before.


Frequency in the Time-Domain

The demonstration below shows how frequency affects a sine wave in the time-domain. The scale shows a distance of 1/100 second. I haven’t gone crazy and I do know that distances can not be measured in seconds. This is the distance that sound travels in 1/100 second. The speed of sound is around 340m/second so the distance represents 3.4m.


As the frequency increases, the wave is compressed horizontally. As the frequency decreases, the wave contracts. At 100Hz (cycles per second) then the wave completes 1 cycle in the distance on the scale. – If it completes 100 cycles in 1 second then it completes 1 cycle in 1/100th a second. At 50Hz it completes 1/2 a cycle and at 1,000Hz it completes 10.

A single cycle at 100Hz takes 10 seconds so the wave is generated 1,000 times slower than sound.


Frequency in the Frequency-Domain

The graph below shows a sine wave in the frequency domain. As the frequency increases, the vertical red bar will move towards the right and as the frequency decreases, it will move towards the left. Since the signal amplitude is not changing then the bar will stay the same height.

Sine wave in the Frequency-Domain

There is room for improvement in my frequency-domain graphs so I will code a frequency-domain visualiser for a post soon.


Change Log

  • Hearing test created
  • Sine wave circle demonstration changed to support a range of frequencies


Source Code (click to expand)