Visualise you Tunes with Code

How digital sound works


Table of Contents

  1. Create musical visualisations using coding with Javascript
  2. The P5 coding environment
  3. How digital sound works
  4. Coding
  5. Challenges
  6. Reference

What is Sound?

When something vibrates, the air next to it moves. This pushes the air, which compresses and expands, creative a sound wave. Our ears can pick up these sound waves:

Sound wave

Image from https://www.mediacollege.com/audio/01/sound-waves.html

Sound Frequencies

Depending on how long these waves are, you will hear a low or high pitched sound:

Longitest3bis

Image from https://blog.soton.ac.uk/soundwaves/wave-basics/wavelength-frequency-relation/

Sound Amplitude

Changes in the pressure of the wave can lead to louder or quieter sounds:

Amplitude wave

Image from https://soundclass.weebly.com/sound.html

Digitising Sound

So, if sounds are movements of air, how can we turn that into a digital form, such as an MP3 file? We do this by reading the amplitude of the wave at regular intervals and storing these values

Digitising sound

Can you see how these numbers represent the sound wave above?

-4 0 4 7 6 3 0 -1 1 3 4 3 -1 -5 -8 -7 -4 -1 -2 -4 -5 -4

Table of Contents

  1. Create musical visualisations using coding with Javascript
  2. The P5 coding environment
  3. How digital sound works
  4. Coding
  5. Challenges
  6. Reference