Update index.html

index.html

@@ -188,6 +188,9 @@
         let bars;
         let animationId;
         let isListening = false;
+        let microphoneStream;
+        let isSpeaking = false;
+        let currentAudioSource = null;
 
         function createVisualizer() {
             const barCount = 64;
@@ -236,8 +239,10 @@
                 const botResponse = `I heard you say: "${transcription.text}".`;
                 addLog(`Bot: ${botResponse}`);
 
+                isSpeaking = true;
                 const speechOutput = await ttsPipeline(botResponse);
-                playAudio(speechOutput.audio);
+                await playAudio(speechOutput.audio);
+                isSpeaking = false;
             } catch (error) {
                 console.error('Error processing speech:', error);
                 addLog('System: Error processing speech. Please try again.');
@@ -255,17 +260,30 @@
         }
 
         function playAudio(audioArray) {
-            const audioBuffer = audioContext.createBuffer(1, audioArray.length, 16000);
-            const channelData = audioBuffer.getChannelData(0);
-            channelData.set(audioArray);
+            return new Promise((resolve) => {
+                const audioBuffer = audioContext.createBuffer(1, audioArray.length, 16000);
+                const channelData = audioBuffer.getChannelData(0);
+                channelData.set(audioArray);
 
-            const source = audioContext.createBufferSource();
-            source.buffer = audioBuffer;
-            source.connect(analyser);
-            analyser.connect(audioContext.destination);
-            source.start();
+                const source = audioContext.createBufferSource();
+                currentAudioSource = source;  // Store the current audio source
+                source.buffer = audioBuffer;
+                source.connect(analyser);
+                analyser.connect(audioContext.destination);
+                source.start();
+                source.onended = () => {
+                    currentAudioSource = null;
+                    resolve();
+                };
+            });
         }
 
+        function stopCurrentAudio() {
+            if (currentAudioSource) {
+                currentAudioSource.stop();
+                currentAudioSource = null;
+            }
+        }
 
         async function toggleListening() {
             if (isListening) {
@@ -274,7 +292,6 @@
                 await startListening();
             }
         }
-      
 
         async function startListening() {
             try {
@@ -287,6 +304,11 @@
                     onSpeechStart: () => {
                         addLog('--- vad: speech start');
                         updateVisualizer();
+                        if (isSpeaking) {
+                            addLog('User interrupted. Stopping bot speech.');
+                            stopCurrentAudio();
+                            isSpeaking = false;
+                        }
                     },
                     onSpeechEnd: (audio) => {
                         addLog('--- vad: speech end');
@@ -295,8 +317,8 @@
                     }
                 });
 
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                const source = audioContext.createMediaStreamSource(stream);
+                microphoneStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                const source = audioContext.createMediaStreamSource(microphoneStream);
                 source.connect(analyser);
 
                 await myvad.start();
@@ -311,12 +333,16 @@
 
         async function stopListening() {
             if (myvad) {
-                await myvad.pause();
+                await myvad.stop();
+                if (microphoneStream) {
+                    microphoneStream.getTracks().forEach(track => track.stop());
+                }
+                stopCurrentAudio();
                 startButton.textContent = 'Begin Call';
                 isListening = false;
                 addLog('System: Stopped listening.');
                 cancelAnimationFrame(animationId);
-                addLog('websocket closed');
+                addLog('System: Microphone closed');
             }
         }