Basic Overview of Audio Signal Processing w/Web Audio API
Tags: audiosignalprocessing, digitalsignalprocessing, beginners, audio
Published: 2019-08-17 17:18:36

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](https://en.wikipedia.org/wiki/Audio_signal_processing) 

##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](https://www.mathsisfun.com/algebra/amplitude-period-frequency-phase-shift.html)

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

![](https://thepracticaldev.s3.amazonaws.com/i/uem1weiln5gpx6ii4a43.png)

Let's Zoom in more: 

![](https://thepracticaldev.s3.amazonaws.com/i/w736eshdutfxshdljcr0.png)

Little bit more:

![](https://thepracticaldev.s3.amazonaws.com/i/s62l08wozmhubuvgq2mt.png)

One more:

![](https://thepracticaldev.s3.amazonaws.com/i/lqy3qp6qq8q51ugv2pja.png)

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](https://techdifferences.com/difference-between-analog-and-digital-signal.html) 

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 

![](https://thepracticaldev.s3.amazonaws.com/i/vrk8y0i2vsn5wgra4nfd.png)

##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](https://en.audiofanzine.com/getting-started/editorial/articles/in-search-of-the-perfect-wave.html)

```javascript
//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);
```

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](https://res.cloudinary.com/practicaldev/image/fetch/s--JW699Bwz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://gifimage.net/wp-content/uploads/2018/10/audio-spectrum-gif-5.gif)

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