📊

Web-Based Audio Tools

Creating interactive systems demonstrating user-perceived sound behavior using Web Audio API

I build browser-based audio tools that make psychoacoustic concepts tangible and interactive. These projects help me learn Web Audio API fundamentals while creating educational demonstrations of how sound perception actually works.

Live Projects

Live Demo

Psychoacoustic Playground

Interactive demonstrations of Haas effect, stereo widening, distance perception, warmth, Shepard tones, and binaural beats. Built with Web Audio API and Tone.js.

Live Demo

Web Acoustic Analyzer

Browser-based frequency analysis tool for real-time signal exploration. Practice project for learning Web Audio API visualization techniques.

In Progress

3D Audio Visualizations

Exploring Three.js integration for spatial audio visualization and interactive sound placement in 3D environments.

Technical Approach

Web Audio API

Learning how to build audio graphs, handle routing, implement effects chains, and manage real-time processing in the browser.

Interactive Design

Creating intuitive interfaces that let users manipulate audio parameters and immediately hear the perceptual results.

Visual Feedback

Implementing real-time visualizations that show frequency content, waveforms, and spatial positioning.

Educational Focus

Making psychoacoustic phenomena tangible through hands-on experimentation rather than just theory.

Demonstrated Concepts

👂

Haas Effect

Demonstrating how short delays create spatial width and apparent sound source location

🎚️

Stereo Manipulation

Interactive exploration of stereo widening, mid-side processing, and spatial positioning

📏

Distance Perception

How amplitude, filtering, and reverb combine to create perceived distance

🔥

Warmth Processing

Demonstrating how harmonic content and filtering affect perceived tonal quality

🌀

Shepard Tones

Creating the illusion of infinitely ascending or descending pitch

🧠

Binaural Beats

Exploring frequency differences and their perceptual effects

Technology Stack

Web Audio API

Browser-native audio processing

Tone.js

High-level audio framework

Three.js

3D visualization and spatial audio

JavaScript

Core language for web development

HTML5 Canvas

Real-time audio visualization

CSS3

Modern UI design

Use Cases

Educational tools: Making psychoacoustic concepts accessible through interactive exploration
Prototyping: Testing audio processing ideas quickly before implementing in C++ plugins
Demonstrations: Showing how perceptual effects work in real-time
Research tools: Building interactive systems for exploring sound behavior
Portfolio pieces: Demonstrating audio programming skills across platforms

🎮 Try the Interactive Demos

All web-based tools are live and free to use. Experiment with the parameters, hear the perceptual changes, and explore how psychoacoustic principles work in practice.

Interested in Web Audio?

Whether you want to discuss interactive audio systems, explore collaboration, or just talk about Web Audio API—reach out.

Get in Touch →