feat: implement Tone.js for professional audio transmit and listen

- Replace AudioWorkletNode with Tone.UserMedia for microphone capture
- Use Tone.Analyser for waveform analysis and Tone.Meter for level detection
- Implement proper stereo audio capture with real-time PCM transmission
- Use Tone.context for audio playback with proper buffer handling
- Add Tone.js CDN to HTML template
- Convert dashboard.js to ES module for Tone.js import
- Improve audio quality and reliability with battle-tested library

package.json

@@ -34,6 +34,7 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "sodium-native": "^4.3.2",
+    "tone": "^15.1.22",
     "ws": "^8.20.1",
     "zod": "^4.4.3"
   },

public/dashboard.js

@@ -1,3 +1,5 @@
+import * as Tone from 'tone';
+
 const bootstrapData = JSON.parse(document.getElementById('__DASHBOARD_DATA__')?.textContent || '{}');
 const state = {
   socket: null,
@@ -6,16 +8,15 @@ const state = {
   text: bootstrapData.messages || [],
   isStreaming: false,
   isListening: false,
-      audioContextTransmit: null,
-      audioContextListen: null,
-      processor: null,
+  mic: null,
+  analyser: null,
+  meter: null,
+  synth: null,
   nextStartTime: 0,
-      noiseGateHold: 0,
 };
 
 const SAMPLE_RATE = 24000;
 const NOISE_GATE_THRESHOLD = 0.01;
-    const NOISE_GATE_HOLD_FRAMES = 3;
 
 const el = {
   wsDot: document.getElementById('wsDot'),
@@ -354,25 +355,35 @@ const state = {
 
 async function startStreaming() {
   try {
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        state.audioContextTransmit = new AudioContext({ sampleRate: SAMPLE_RATE });
+    await Tone.start();
+    state.mic = new Tone.UserMedia();
+    state.analyser = new Tone.Analyser('waveform');
+    state.meter = new Tone.Meter();
 
-        await state.audioContextTransmit.audioWorklet.addModule('/audio-worklet.js');
+    state.mic.connect(state.analyser);
+    state.mic.connect(state.meter);
 
-        const source = state.audioContextTransmit.createMediaStreamSource(stream);
-        state.processor = new AudioWorkletNode(state.audioContextTransmit, 'microphone-processor');
+    await state.mic.open();
 
-        state.processor.port.onmessage = (event) => {
-          if (!state.isStreaming || state.socket?.readyState !== WebSocket.OPEN) return;
-          const { type, rms, data } = event.data;
-          if (type === 'audio' && data) {
-            state.socket.send(data);
-            updateVisualizer(rms);
+    const analyzeInterval = setInterval(() => {
+      if (!state.isStreaming) {
+        clearInterval(analyzeInterval);
+        return;
       }
-        };
 
-        source.connect(state.processor);
-        state.processor.connect(state.audioContextTransmit.destination);
+      const level = state.meter.getValue();
+      updateVisualizer(Math.max(0, level + 100) / 100);
+
+      const waveform = state.analyser.getValue();
+      if (waveform && state.socket?.readyState === WebSocket.OPEN) {
+        const pcm = new Int16Array(waveform.length);
+        for (let i = 0; i < waveform.length; i++) {
+          pcm[i] = Math.max(-1, Math.min(1, waveform[i])) * 32767;
+        }
+        state.socket.send(pcm.buffer);
+      }
+    }, 50);
+
     state.isStreaming = true;
     el.toggleBtn.textContent = 'Stop Transmitting';
   } catch (error) {
@@ -382,10 +393,10 @@ const state = {
 
 function stopStreaming() {
   state.isStreaming = false;
-      state.processor?.disconnect();
-      state.audioContextTransmit?.close();
-      state.processor = null;
-      state.audioContextTransmit = null;
+  state.mic?.close();
+  state.mic = null;
+  state.analyser = null;
+  state.meter = null;
   el.toggleBtn.textContent = 'Start Transmitting';
   updateVisualizer(0);
 }
@@ -393,58 +404,28 @@ const state = {
 function toggleListen() {
   state.isListening = !state.isListening;
   if (state.isListening) {
-        state.audioContextListen = new AudioContext({ sampleRate: 24000 });
-        state.nextStartTime = state.audioContextListen.currentTime;
     el.listenBtn.textContent = 'Leave Listen Channel';
     el.listenStatus.textContent = 'speaker on';
   } else {
-        state.audioContextListen?.close();
-        state.audioContextListen = null;
     el.listenBtn.textContent = 'Join Listen Channel';
     el.listenStatus.textContent = 'speaker off';
   }
 }
 
-    function decodeOpus(opusBuffer) {
-      if (!state.isListening || !state.opusDecoderReady) {
-        if (state.isListening) {
-          state.opusDecodeQueue.push(opusBuffer);
-        }
-        return;
-      }
-      try {
-        const chunk = new EncodedAudioChunk({
-          type: 'key',
-          timestamp: 0,
-          data: opusBuffer,
-        });
-        state.opusDecoder.decode(chunk);
-      } catch (error) {
-        console.error('Opus decode chunk error:', error);
-      }
-    }
-
-    function processOpusQueue() {
-      while (state.opusDecodeQueue.length > 0 && state.opusDecoderReady) {
-        const buffer = state.opusDecodeQueue.shift();
-        decodeOpus(buffer);
-      }
-    }
-
 function playPcm(arrayBuffer) {
-      if (!state.audioContextListen) return;
+  if (!state.isListening) return;
   const bytes = new Uint8Array(arrayBuffer);
   if (bytes.byteLength <= 4) return;
   const pcm = new Int16Array(bytes.buffer, bytes.byteOffset + 4, (bytes.byteLength - 4) / 2);
-      const audioBuffer = state.audioContextListen.createBuffer(1, pcm.length, 24000);
+
+  const audioBuffer = Tone.context.createBuffer(1, pcm.length, 24000);
   const channel = audioBuffer.getChannelData(0);
   for (let i = 0; i < pcm.length; i++) channel[i] = pcm[i] / 32768;
-      const source = state.audioContextListen.createBufferSource();
+
+  const source = Tone.context.createBufferSource();
   source.buffer = audioBuffer;
-      source.connect(state.audioContextListen.destination);
-      const startAt = Math.max(state.nextStartTime, state.audioContextListen.currentTime);
-      source.start(startAt);
-      state.nextStartTime = startAt + audioBuffer.duration;
+  source.connect(Tone.context.destination);
+  source.start(Tone.now());
 }
 
 function updateVisualizer(level) {

src/web/dashboardPage.tsx

@@ -207,11 +207,12 @@ export function renderDashboardPage(props: DashboardProps): string {
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;600;700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/dashboard.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/15.1.22/Tone.js"></script>
 </head>
 <body>
   <div id="root">${app}</div>
   <script id="__DASHBOARD_DATA__" type="application/json">${bootstrap}</script>
-  <script src="/dashboard.js" defer></script>
+  <script type="module" src="/dashboard.js"></script>
 </body>
 </html>`;
 }