Web Audio API: Cool stuff that you didn’t know that you can do with the web #2 | by Laura Morinigo | Samsung Internet Developers | Dec, 2024

Hello web developers! Welcome to another chapter of “Cool stuff that you didn’t know that you can do with the web”. In this post, we’re diving deep into the Web Audio API — a game-changing tool that lets you manipulate sound directly in the browser. But we’re not stopping there. We’ll also start exploring how you can integrate the Web Audio API into immersive experiences like WebXR, turning your web apps into interactive soundscapes. 🎧

The Web Audio API is a high-level JavaScript API that allows developers to control, manipulate, and process audio directly within the browser. Unlike the simpler tag, this API offers real-time audio capabilities like synthesis, spatial sound effects, and low-latency processing, making it incredibly powerful for building interactive web experiences.

There are many things that you can do with web audio, imagine being a DJ and manipulating your favourite track to create the next disco classic? You can do it with web audio, there are some of its capabilities:

• Real-Time Audio Processing: Apply filters, manipulate playback rates, and synthesize sounds — all in real-time.
• Interactive Web Apps: Build interactive applications with audio-driven elements, perfect for gaming or immersive experiences.
• Immersive Experiences: Integrating the Web Audio API with WebXR allows for 3D soundscapes, adding a new level of immersion in virtual and augmented reality applications.
• Low-Latency: It’s optimized for performance, making it a great choice for audio-intensive applications like games, music players, or live coding environments.

1. Audio Playback: Load and play audio files with precise control over timing. The Web Audio API allows you to load and play audio files with precision and control. Whether you’re building a music player, a game, or an interactive art installation, you’ll often start with basic playback functionality. In our demo below, you can manipulate the playback speed and add filters to remix a track in real time.
2. Audio Synthesis: If you’re feeling adventurous, the Web Audio API also lets you synthesize sounds from scratch using oscillators. No audio files are needed here! Oscillators generate sound waves that you can control to create music, sound effects, or even a virtual piano.

let oscillator = audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 2);

3. Filters and Effects: Apply real-time audio effects, like lowpass or highpass filters. For live audio manipulation, you can use BiquadFilterNodes to apply real-time effects like lowpass and highpass filters. These effects allow you to modulate specific frequency ranges and are great for creating DJ-like sound transitions.

4. Spatial Audio: Position sounds in a 3D space for immersive applications.

5. Audio Data Analysis: Analyze audio streams in real-time to visualize or react to sound.

6. Pitch Shifting: While Web Audio doesn’t have a direct pitch-shifting feature, you can simulate it by adjusting the playback rate of the audio. This changes both the speed and pitch of the sound — faster playback results in higher pitch, while slower playback lowers the pitch.

You can visit our demo directly here: DJ Web Audio API

• Let’s start building our UI:

Play

Playback Speed: 1x
DJ Effects:

Lowpass Filter
Highpass Filter
Remove Filter
Loading audio file...
 

• In our javascript file, let’s start initializing the audio context:

    let audioContext;
let audioBuffer, sourceNode, gainNode, filterNode;
let isPlaying = false;
let audioUrl = 'https://cdn.glitch.global/31a5f6bf-6139-4373-a5eb-99fc46c5f8b0/Depeche%20Mode.mp3?v=1727695411796'; // Your hosted file
// Initialize the AudioContext
function initAudioContext() {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
console.log('AudioContext initialized.');
document.getElementById('status').innerText = 'AudioContext initialized.';
}
}

• Let’s fetch and decode the audio file:

 // Fetch and decode the audio file
function loadAudio() {
console.log(`Starting to load audio from ${audioUrl}...`);
// Ensure the AudioContext is initialized before loading audio
initAudioContext();
fetch(audioUrl)
.then(response => {
console.log('Audio fetch response:', response);
if (!response.ok) {
throw new Error(`Failed to fetch audio file: ${response.statusText}`);
}
return response.arrayBuffer();
})
.then(data => {
console.log('Audio file fetched, decoding audio data...');
return audioContext.decodeAudioData(data);
})
.then(buffer => {
audioBuffer = buffer;
console.log('Audio file decoded successfully!');
document.getElementById('status').innerText = 'Audio file loaded!';
})
.catch(error => {
console.error('Error loading audio file:', error);
document.getElementById('status').innerText = `Error loading audio file: ${error.message}`;
});
}

• Let’s create a function to play and pause

    function playPause() {
if (!audioBuffer) {
document.getElementById('status').innerText = 'Audio file not loaded yet!';
console.log('Audio file not loaded yet, aborting play.');
return;
}
if (isPlaying) {
console.log('Pausing the audio...');
sourceNode.stop();
isPlaying = false;
document.getElementById('playPause').innerText = 'Play';
} else {
console.log('Playing the audio...');
startAudio();
isPlaying = true;
document.getElementById('playPause').innerText = 'Pause';
}
}

 function startAudio() {
sourceNode = audioContext.createBufferSource();
sourceNode.buffer = audioBuffer;
gainNode = audioContext.createGain();
sourceNode.connect(gainNode);
gainNode.connect(audioContext.destination);
sourceNode.playbackRate.value = document.getElementById('speedControl').value;
sourceNode.start();
console.log('Audio started playing.');
}

   document.getElementById('speedControl').addEventListener('input', (event) => {
let speed = event.target.value;
document.getElementById('speedValue').innerText = `${speed}x`;
if (sourceNode) sourceNode.playbackRate.value = speed;
});

    document.getElementById('lowpass').addEventListener('click', () => {
if (!isPlaying) {
document.getElementById('status').innerText = 'Play the audio first!';
return;
}
if (filterNode) filterNode.disconnect();
filterNode = audioContext.createBiquadFilter();
filterNode.type = 'lowpass';
filterNode.frequency.setValueAtTime(1000, audioContext.currentTime);
gainNode.disconnect();
gainNode.connect(filterNode);
filterNode.connect(audioContext.destination);
});

   document.getElementById('highpass').addEventListener('click', () => {
if (!isPlaying) {
document.getElementById('status').innerText = 'Play the audio first!';
return;
}
if (filterNode) filterNode.disconnect();
filterNode = audioContext.createBiquadFilter();
filterNode.type = 'highpass';
filterNode.frequency.setValueAtTime(1000, audioContext.currentTime);
gainNode.disconnect();
gainNode.connect(filterNode);
filterNode.connect(audioContext.destination);
});

    document.getElementById('removeFilter').addEventListener('click', () => {
if (filterNode) filterNode.disconnect();
gainNode.disconnect();
gainNode.connect(audioContext.destination);
});

• Initialize AudioContext and load audio:

    // Initialize AudioContext and load audio on button click
document.getElementById('playPause').addEventListener('click', () => {
playPause(); // Play or pause the audio
});
// Load the audio file when the page is ready
window.addEventListener('load', loadAudio);

Here are some real-world applications where the Web Audio API shines:

1. Audio Editing Tools: Browser-based DAWs (Digital Audio Workstations) for music production.

2. Games: Real-time sound manipulation to match game actions.

3. Interactive Art: Sound-responsive websites or installations where music and visuals interact in real-time.

4. Virtual and Augmented Reality: Enhance immersive experiences with 3D audio.

Imagine combining the Web Audio API with WebXR to create immersive, spatial audio experiences. For example, a mini piano in VR! Users could press virtual keys with their hands, and the Web Audio API would synthesize the corresponding notes in real time. By combining WebXR with Web Audio, you can create immersive worlds where sound plays an integral role in the user’s experience. Would you like to create one? Stay tuned because we will introduce how to integrate both in our next blogposts.

The Web Audio API is incredibly versatile and opens up a whole new range of possibilities for web development. From simple playback to real-time audio manipulation and immersive soundscapes in WebXR, you can turn your browser into a playground for sound. Go ahead and explore the API further to see how you can integrate these powerful audio tools into your own projects.

Subscribe to our blog for more posts in our *Cool Stuff You Didn’t Know You Could Do with Web Development* series — and keep making noise on the web! 🔊🎶