Update index.html

index.html

@@ -182,157 +182,33 @@
         let myvad;
         let sttPipeline;
         let ttsPipeline;
+        let audioContext;
+        let analyser;
+        let dataArray;
+        let bars;
+        let animationId;
         let isListening = false;
+        let microphoneStream;
         let isSpeaking = false;
+        let currentAudioSource = null;
 
-        class Streamer {
-            constructor(onAudioProcess) {
-                this.stream = null;
-                this.processor = null;
-                this.audioContext = null;
-                this.onAudioProcess = onAudioProcess;
-                this.userIsSpeaking = false;
-            }
-
-            async start() {
-                const constraints = { audio: true };
-                this.stream = await navigator.mediaDevices.getUserMedia(constraints);
-                this.audioContext = new (window.AudioContext || window.webkitAudioContext)({
-                    sampleRate: 24000,
-                });
-                const source = this.audioContext.createMediaStreamSource(this.stream);
-                this.processor = this.audioContext.createScriptProcessor(1024, 1, 1);
-                this.processor.onaudioprocess = (event) => {
-                    const inputData = event.inputBuffer.getChannelData(0);
-                    const gain = this.userIsSpeaking ? 1 : 0.2;
-                    const processedData = inputData.map(sample => sample * gain);
-                    this.onAudioProcess(processedData);
-                };
-                source.connect(this.processor);
-                this.processor.connect(this.audioContext.destination);
-            }
-
-            stop() {
-                this.stream.getTracks().forEach(track => track.stop());
-                this.processor.disconnect();
-                this.audioContext.close();
-            }
-
-            setUserIsSpeaking(isSpeaking) {
-                this.userIsSpeaking = isSpeaking;
-            }
-        }
-
-        class Playback {
-            constructor(onPlaybackStart, onPlaybackEnd) {
-                this.audioContext = new (window.AudioContext || window.webkitAudioContext)({
-                    sampleRate: 24000,
-                });
-                this.samples = [];
-                this.scriptNode = this.audioContext.createScriptProcessor(1024, 1, 1);
-                this.gainNode = this.audioContext.createGain();
-                this.gainNode.gain.value = 0.5;
-                this.isPlaying = false;
-                this.onPlaybackStart = onPlaybackStart;
-                this.onPlaybackEnd = onPlaybackEnd;
-                this.currentBuffer = new Float32Array(1024);
-                this.currentBufferIndex = 0;
-
-                this.scriptNode.onaudioprocess = (event) => {
-                    const outputBuffer = event.outputBuffer.getChannelData(0);
-                    
-                    if (this.samples.length > 0 || this.currentBufferIndex < this.currentBuffer.length) {
-                        if (!this.isPlaying) {
-                            this.isPlaying = true;
-                            this.onPlaybackStart();
-                        }
-                        
-                        for (let i = 0; i < outputBuffer.length; i++) {
-                            if (this.currentBufferIndex >= this.currentBuffer.length) {
-                                if (this.samples.length > 0) {
-                                    this.currentBuffer = this.samples.shift();
-                                    this.currentBufferIndex = 0;
-                                } else {
-                                    outputBuffer[i] = 0;
-                                    continue;
-                                }
-                            }
-                            outputBuffer[i] = this.currentBuffer[this.currentBufferIndex++];
-                        }
-                    } else {
-                        if (this.isPlaying) {
-                            this.isPlaying = false;
-                            this.onPlaybackEnd();
-                        }
-                        outputBuffer.fill(0);
-                    }
-                };
-
-                this.scriptNode.connect(this.gainNode);
-                this.gainNode.connect(this.audioContext.destination);
-            }
-
-            start() {
-                this.audioContext.resume();
-            }
-
-            stop() {
-                this.audioContext.suspend();
-                this.samples = [];
-                this.currentBuffer = new Float32Array(1024);
-                this.currentBufferIndex = 0;
-                this.isPlaying = false;
-            }
-
-            addSamples(samples) {
-                for (let i = 0; i < samples.length; i += 1024) {
-                    const chunk = samples.slice(i, i + 1024);
-                    if (chunk.length < 1024) {
-                        const paddedChunk = new Float32Array(1024);
-                        paddedChunk.set(chunk);
-                        this.samples.push(paddedChunk);
-                    } else {
-                        this.samples.push(chunk);
-                    }
-                }
-            }
-
-            clear() {
-                this.samples = [];
-                this.currentBuffer = new Float32Array(1024);
-                this.currentBufferIndex = 0;
-                this.isPlaying = false;
-            }
-        }
-
-        const streamer = new Streamer(processMicrophoneInput);
-        const playback = new Playback(
-            () => {
-                addLog("Bot started speaking");
-                isSpeaking = true;
-            },
-            () => {
-                addLog("Bot finished speaking");
-                isSpeaking = false;
+        function createVisualizer() {
+            const barCount = 64;
+            for (let i = 0; i < barCount; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'bar';
+                visualizer.appendChild(bar);
             }
-        );
-
-        function processMicrophoneInput(audioData) {
-            updateVisualizer(audioData);
+            bars = visualizer.getElementsByClassName('bar');
         }
 
-        function updateVisualizer(audioData) {
-            const bars = visualizer.getElementsByClassName('bar');
-            const bufferLength = audioData.length;
-            const barWidth = visualizer.clientWidth / bufferLength;
-            
-            for (let i = 0; i < bufferLength; i++) {
-                const barHeight = Math.abs(audioData[i]) * 100;
-                if (bars[i]) {
-                    bars[i].style.height = barHeight + '%';
-                    bars[i].style.width = barWidth + 'px';
-                }
+        function updateVisualizer() {
+            analyser.getByteFrequencyData(dataArray);
+            for (let i = 0; i < bars.length; i++) {
+                const barHeight = dataArray[i] / 2;
+                bars[i].style.height = barHeight + 'px';
             }
+            animationId = requestAnimationFrame(updateVisualizer);
         }
 
         async function initializePipelines() {
@@ -363,8 +239,10 @@
                 const botResponse = `I heard you say: "${transcription.text}".`;
                 addLog(`Bot: ${botResponse}`);
 
+                isSpeaking = true;
                 const speechOutput = await ttsPipeline(botResponse);
-                playback.addSamples(new Float32Array(speechOutput.audio));
+                await playAudio(speechOutput.audio);
+                isSpeaking = false;
             } catch (error) {
                 console.error('Error processing speech:', error);
                 addLog('System: Error processing speech. Please try again.');
@@ -381,6 +259,32 @@
             logsDiv.scrollTop = logsDiv.scrollHeight;
         }
 
+        function playAudio(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();
+                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) {
                 await stopListening();
@@ -391,28 +295,35 @@
 
         async function startListening() {
             try {
-                isListening = true;
-                await streamer.start();
-                playback.start();
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 128;
+                dataArray = new Uint8Array(analyser.frequencyBinCount);
 
                 myvad = await vad.MicVAD.new({
                     onSpeechStart: () => {
                         addLog('--- vad: speech start');
-                        streamer.setUserIsSpeaking(true);
+                        updateVisualizer();
                         if (isSpeaking) {
                             addLog('User interrupted. Stopping bot speech.');
-                            playback.clear();
+                            stopCurrentAudio();
+                            isSpeaking = false;
                         }
                     },
                     onSpeechEnd: (audio) => {
                         addLog('--- vad: speech end');
-                        streamer.setUserIsSpeaking(false);
+                        cancelAnimationFrame(animationId);
                         processSpeech(audio);
                     }
                 });
 
+                microphoneStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                const source = audioContext.createMediaStreamSource(microphoneStream);
+                source.connect(analyser);
+
                 await myvad.start();
                 startButton.textContent = 'End Call';
+                isListening = true;
                 addLog('System: Listening...');
             } catch (error) {
                 console.error('Error starting VAD:', error);
@@ -422,14 +333,26 @@
 
         async function stopListening() {
             if (myvad) {
-                await myvad.destroy();
+                try {
+                    await myvad.destroy();
+                } catch (error) {
+                    console.error('Error stopping VAD:', error);
+                }
                 myvad = null;
-        }
-            streamer.stop();
-            playback.stop();
+            }
+            if (microphoneStream) {
+                microphoneStream.getTracks().forEach(track => track.stop());
+                microphoneStream = null;
+            }
+            if (audioContext) {
+                await audioContext.close();
+                audioContext = null;
+            }
+            stopCurrentAudio();
             startButton.textContent = 'Begin Call';
             isListening = false;
             addLog('System: Stopped listening.');
+            cancelAnimationFrame(animationId);
             addLog('System: Microphone closed');
         }
 
@@ -438,15 +361,6 @@
             logsDiv.innerHTML = '';
         });
 
-        function createVisualizer() {
-            const barCount = 64;
-            for (let i = 0; i < barCount; i++) {
-                const bar = document.createElement('div');
-                bar.className = 'bar';
-                visualizer.appendChild(bar);
-            }
-        }
-
         createVisualizer();
         initializePipelines();
     </script>