From 06407a829ed1e8eaec0bd8e0cf5d3e985e05b044 Mon Sep 17 00:00:00 2001
From: Alexander Whitestone <alexpaynex@gmail.com>
Date: Tue, 24 Mar 2026 00:44:05 -0400
Subject: [PATCH] =?UTF-8?q?feat:=203D=20audio=20positioning=20=E2=80=94=20?=
 =?UTF-8?q?sounds=20come=20from=20the=20direction=20of=20their=20source=20?=
 =?UTF-8?q?(#255)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #255
Agent: groq
---
 app.js    | 36 ++++++++++++++++++++++++++++++++++++
 style.css |  5 +++++
 2 files changed, 41 insertions(+)

diff --git a/app.js b/app.js
index b396094..bfe5404 100644
--- a/app.js
+++ b/app.js
@@ -438,6 +438,11 @@ function updateFocusDisplay() {
   if (photoFocusDisplay) {
     photoFocusDisplay.textContent = bokehPass.uniforms['focus'].value.toFixed(1);
   }
+
+  // 3D Audio: Update panner position to match camera
+  if (audioPanner) {
+    audioPanner.setPosition(camera.position.x, camera.position.y, camera.position.z);
+  }
 }
 
 document.addEventListener('keydown', (e) => {
@@ -797,6 +802,37 @@ document.getElementById('debug-toggle').addEventListener('click', () => {
   }
 });
 
+// === 3D AUDIO SETUP ===
+let audioContext;
+let audioSource;
+let audioPanner;
+let is3DAudioEnabled = true;
+
+// Replace the <audio> element with Web Audio API
+const ambientSound = document.getElementById('ambient-sound');
+ambientSound.remove();
+
+const initAudio = async () => {
+  audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const response = await fetch('ambient.mp3');
+  const arrayBuffer = await response.arrayBuffer();
+  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+  audioSource = audioContext.createBufferSource();
+  audioSource.buffer = audioBuffer;
+
+  audioPanner = audioContext.createPanner();
+  audioPanner.panningModel = 'HRTF';
+  audioPanner.distanceModel = 'inverse';
+  audioSource.connect(audioPanner);
+  audioPanner.connect(audioContext.destination);
+
+  audioSource.loop = true;
+  audioSource.start();
+};
+
+initAudio();
+
 // === WEBSOCKET CLIENT ===
 import { wsClient } from './ws-client.js';
 
diff --git a/style.css b/style.css
index 8ccbc2d..a2f069c 100644
--- a/style.css
+++ b/style.css
@@ -54,6 +54,11 @@ canvas {
 
 #audio-toggle.muted {
   background-color: var(--color-text-muted);
+  color: var(--color-bg);
+}
+
+#audio-toggle.muted::before {
+  content: "🔇";
 }
 
 /* === DEBUG MODE === */