Physics Sound Localization Demo

Design and Construction

Both apps are primarily programmed in javascript with some HTML and CSS for the user interface. They depend on the Web Audio API for audio manipulation. The first demonstration allows users to simulate sounds coming from their left or right side by manipulating the timing and volume differences between ears. This could also be accomplished with a physical channel splitter, delay line, and amplifier (might be a fun project!), however I will describe it using the javascript components.

First, take a mono audio source (or one channel from a stereo audio source) and set up an AudioContext. Split it into two channels using ChannelSplitterNode. Next, connect each channel to its own GainNode to manipulate volume. For intuitive UI, use StereoPannerNode instead. Up to 1 ms delay can be added to either ear using DelayNode. For intuitive UI, add a default 1 ms delay to both ears, fix the right delay, and toggle the left delay between 0-2ms. Connect the sound intended for the left ear to channel 0 and the right ear to channel 1 of ChannelMergerNode. Commented source code is available here (intuitive version) and here (manual version). Feel free to use and change it for your purposes.



The second app allows for simulation of 3D spatial sound. In addition to Web Audio API, it relies on Threejs, HRTF Panner from Tomasz Wozniak (github), and the CIPIC HRTF database. As with demo 1, set up a mono AudioContext(). Connect it to a GainNode() for volume control and then to HRTFPanner(). The HRTFPanner() requires three inputs: source audio, 3D position, and HRTF functions. For 3D position, I stripped down this three.js example to just the model and mouse controls, then took the camera position to be the sound source. Feed the camera coordinates into HRTFPanner(). Use the CPIC HRTF database for the last input. Send the output from HRTFPanner() to the user's audio. Commented source code is here. Since it depends on a few separate scripts, to run it you will need the files found on my github. But the easiest way to use the demo is from this website!