Bobrov Dev
Web Audio for Electric Guitar: Distortion

Web Audio for Electric Guitar: Distortion

Nobody could imagine rock music without distortion effect. Overdrive and distortion stompboxes are most widely used guitar effects. Today I want to show how to implement that effect using Web Audio API 🎛!

This post is a part of “Web Audio for Electric Guitar” series, check out other posts as well!

Web Audio for Electric Guitar Series:

  1. How to Connect Instrument
  2. Cabinet Emulation
  3. Distortion – Current

What is Distortion?

Distortion is an audio effect that is widely used in rock music (but not only) to create heavy guitar (or bass) sounds. The sound wave get damaged going thought the effect pipeline and become sated with new harmonics. Harmonics are additional waves summed together to get more complex wave shapes. It is a big separate topic, but you can find a lot of information about it, I could recommend to read about harmonics here. It is way easier to get the idea of distorted signal with illustration of a clean and distorted sound waves.

– image

Actually distortion is not an only effect, but a group of effects - overdrive, distortion and fuzz. The main difference between them is how hard they transform the original sound. Overdrive boosts your electric guitar gain and applies soft-clipping. The clipping level depends on how hard you play on instrument. Distortion heavily saturates sound and gives the same amount of the effect no matter how loud you are playing. Fuzz takes distortion to the next level making wave almost square, so it sounds like if you amp is broken.

It is hard to describe a sound with words, so I put samples of each effect to get better understanding:

  • Overdrive
  • Distortion
  • Fuzz


Implementation ways