DEV Community 👩‍💻👨‍💻

Fabian Fabro
Fabian Fabro

Posted on

Basic Overview of Audio Signal Processing w/Web Audio API

Audio Signal Processing, a topic where most of the material I find on this is dense information. In a nutshell, audio signals are the representation for sound waves, whether it is an analog or digital source, being computed and generated to be utilized as data for application.

It is actually a subtopic of Digital Signal Processing, which is the main topic of translating data into a computer form to be used, where data can vary from speech, imaging, telecommunication, seismology, biomedical engineering, etc.

But for now, I'd like to focus on the audio portion of data processing.

Examples in applying Audio Signal Processing:

  • storage
  • data compression
  • music information retrieval
  • speech processing
  • localization
  • acoustic detection
  • transmission
  • noise cancellation
  • acoustic fingerprinting
  • sound recognition
  • synthesis
  • enhancement (equalization, filtering, level compression, echo and reverb removal or addition, etc.)

source

What are Audio Signals?

It is the representation of sound. There are two different types of signals: Analog and Digital Signals.

Analog is represented with a sign wave, described with Period, Amplitude, Phase and Frequency.

Period - the length of the peak of the wave to the next

Amplitude - the height from the center to the peak, either highest or lowest

Phase (Shift)- the length of the wave that's shifted horizontally from its original position

Frequency - amount of times the period occurs

Period, Amplitude, Phase, Frequency

Here is an example of an Analog Signal, from a sound effect I designed for a hobby game I am developing:

Let's Zoom in more:

Little bit more:

One more:

Looking at the audio data in this retrospect, we can actually see the lines are becoming more solid than seeing the wavy line. With this representation of the data, it can be translated and interpreted as digital data to be processed with the computer now. This is most represented as a sine wave.

Digital is represented with a square wave. It carries data in binary form. It's described with bit rate and bit interval. As you can see the difference with the sine wave, the square wave is more straight-forward with no curves and slopes. This means that the sound would be cutoff with no steady progression. A good example of a representation for a square wave is Synthesizer music. The synthesizer, an electric keyboard, plays a note and you can hear the sound immediately at a high gain, or volume, and when letting of the note, it cuts off immediately.

A great analogy of comparing Analog and Digital signals is:

Analog is like the human voice where you can control your volume, speed, and articulation, etc.

Digital is like picking a note on an electric guitar immediately (unless you control your volume with the volume knob).

analog vs digital signals

Now I mentioned Sine and Square Wave, but there are actually two more called Sawtooth and Triangle Waves. These are the four basic waveforms of

What is the Processing?

With this, we can introduce a bit about Web Audio API, which retrieves and manipulates audio data, as an example with processing audio signals.

Listen to the different Waveform sounds

//using AudioContext method from Web Audio API
var audioContext = new AudioContext();

//Apply the createOscillator method to osc variable
let osc;
osc = audioContext.createOscillator();

//Assign the type of waveform as "sine"
osc.type = "sine";

//Apply the frequency value to 440
osc.frequency.value = 440;

//connect osc to the destination
osc.connect(audioContext.destination);

//output sound
osc.start(audioContext.currentTime);
Enter fullscreen mode Exit fullscreen mode

Hey! We got sound! You are hearing a sine wave of 440hz or the music note value "A."

With this example, we are creating an audio signal, which is the oscillator and giving the waveform type. We are manipulating the oscillator by giving a frequency value of 440. You could adjust other parts to the audio, like the amplitude which would adjust the gain or volume.

Audio Spectrum is another way of manipulating audio signals for a visual display. This reads the frequencies and amplitude in order to control the shape of each bar.

Audio Spectrum

This was just an introduction to audio signal processing. I would like to probably make another blog part to this topic because there is just so much to learn about software with audio. I hope my blog helped understand the use and power of audio into technology in some way.

If you are still curious about the topics of audio in software, you can check out other related topics that branch off from Audio Signal Processing:
- Discrete Fourier Transform
- Fast Fourier Transform
- Spectrum Analyzer
- Game Audio Implementation
- Sound Theory

Here are some links of more topics about Audio Signal Processing.

https://www.videomaker.com/article/c04/18241-know-your-audio-signal-processing-techniques

https://cs.wellesley.edu/~cs110/reading/sound-files/

https://www.javatpoint.com/difference-between-analog-signals-and-digital-signals

Top comments (2)

Collapse
 
isalevine profile image
Isa Levine

I've been meaning to dive into this for months!! Thanks for the writeup, now I know who to bug when I get stuck... ;)

Collapse
 
varunra35569603 profile image
Varun Rana

Thanks for writing up. I would be working up on it this month.

🌚 Life is too short to browse without dark mode