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

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

Apr 24, 2025 - 03:23

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

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;

});