Update index.html

index.html

@@ -190,6 +190,7 @@
         let isListening = false;
         let mediaStream;
         let audioSource;
+        let playbackContext;
 
         function createVisualizer() {
             const barCount = 64;
@@ -257,14 +258,13 @@
         }
 
         function playAudio(audioArray) {
-            const audioBuffer = audioContext.createBuffer(1, audioArray.length, 16000);
+            const audioBuffer = playbackContext.createBuffer(1, audioArray.length, 16000);
             const channelData = audioBuffer.getChannelData(0);
             channelData.set(audioArray);
 
-            const source = audioContext.createBufferSource();
+            const source = playbackContext.createBufferSource();
             source.buffer = audioBuffer;
-            source.connect(analyser);
-            analyser.connect(audioContext.destination);
+            source.connect(playbackContext.destination);
             source.start();
         }
 
@@ -283,10 +283,21 @@
                 analyser.fftSize = 128;
                 dataArray = new Uint8Array(analyser.frequencyBinCount);
 
-                mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                const constraints = {
+                    audio: {
+                        echoCancellation: true,
+                        noiseSuppression: true,
+                        autoGainControl: true
+                    }
+                };
+
+                mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
                 audioSource = audioContext.createMediaStreamSource(mediaStream);
                 audioSource.connect(analyser);
 
+                // Create a separate context for playback
+                playbackContext = new (window.AudioContext || window.webkitAudioContext)();
+
                 myvad = await vad.MicVAD.new({
                     onSpeechStart: () => {
                         addLog('--- vad: speech start');
@@ -315,7 +326,7 @@
         async function stopListening() {
             if (myvad) {
                 try {
-                    await myvad.stop();  // Changed from pause() to stop()
+                    await myvad.stop();
                     addLog('System: VAD stopped.');
                 } catch (error) {
                     console.error('Error stopping VAD:', error);
@@ -323,7 +334,6 @@
                 }
             }
 
-            // Stop all tracks in the media stream
             if (mediaStream) {
                 mediaStream.getTracks().forEach(track => {
                     track.stop();
@@ -331,13 +341,11 @@
                 });
             }
 
-            // Disconnect the audio source from the analyser
             if (audioSource) {
                 audioSource.disconnect();
                 addLog('System: Audio source disconnected.');
             }
 
-            // Close the audio context
             if (audioContext) {
                 try {
                     await audioContext.close();
@@ -348,6 +356,16 @@
                 }
             }
 
+            if (playbackContext) {
+                try {
+                    await playbackContext.close();
+                    addLog('System: Playback context closed.');
+                } catch (error) {
+                    console.error('Error closing playback context:', error);
+                    addLog('System: Error closing playback context.');
+                }
+            }
+
             cancelAnimationFrame(animationId);
             startButton.textContent = 'Begin Call';
             isListening = false;