How to Create an Audio Delay Effect in the Browser Using Web Audio API

Posted on by — No Comments ↓

Audio effects like delay are crucial for many music and sound design applications. In this article, we’ll build a simple audio delay effect in the browser using the Web Audio API. You’ll be able to apply the delay in real-time, with adjustable feedback and delay time, all running in the browser with no external libraries.

What is an Audio Delay Effect?

An audio delay effect plays an input sound after a specified time, creating a “echo” effect. This is commonly used in music production for creating depth or rhythmic patterns.

Step 1: Set Up the Audio Context

First, we’ll need an AudioContext to work with the Web Audio API and create our audio graph:

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

Step 2: Create the Delay Node

The Web Audio API provides a DelayNode that we can use to create the delay effect:

const delayNode = audioCtx.createDelay();

delayNode.delayTime.value = 0.5;  // 500ms delay

Step 3: Set Up Feedback

We can create a feedback loop by connecting the output of the delay node back into itself. This will cause the delayed sound to repeat a number of times:

const feedbackNode = audioCtx.createGain();

feedbackNode.gain.value = 0.6;  // Control how much the delayed sound repeats


delayNode.connect(feedbackNode);

feedbackNode.connect(delayNode);  // Feedback loop

Step 4: Connect to the Output

Finally, we connect the delay node to the audio context’s destination (i.e., the speakers or headphones):

delayNode.connect(audioCtx.destination);

Step 5: Trigger the Effect with Audio

We’ll load an audio file and connect it to the delay effect:

const audioElement = new Audio('path/to/audio-file.mp3');

const audioSource = audioCtx.createMediaElementSource(audioElement);


audioSource.connect(delayNode);

audioElement.play();

Step 6: Add UI for Delay Time and Feedback Control

Let’s add a simple HTML interface to control the delay time and feedback:

const delayTimeInput = document.getElementById('delayTime');

const feedbackInput = document.getElementById('feedback');


delayTimeInput.addEventListener('input', (event) => {

  delayNode.delayTime.value = event.target.value;

});



feedbackInput.addEventListener('input', (event) => {

  feedbackNode.gain.value = event.target.value;

});

Pros and Cons

✅ Pros

  • Real-time manipulation of audio effects in the browser
  • Low-latency and highly interactive for live performance
  • No external libraries required

⚠️ Cons

  • Potential performance issues on lower-end devices
  • Delay is limited to audio that can be played through the browser
  • More advanced features like feedback decay or modulation require extra work

🚀 Alternatives

  • Howler.js: Simpler interface for audio effects

  • Tone.js: Advanced audio synthesis and effects in the browser

  • Web Audio Modules: For more complex audio effects setups

Summary

Using the Web Audio API, you can easily create a customizable real-time audio delay effect directly in the browser. With just a few lines of code, you can build a responsive sound effect system for interactive audio applications, performances, or web-based music tools.

If this was useful, you can support me here: buymeacoffee.com/hexshift

Leave a Reply