Update index.html

index.html

@@ -203,9 +203,8 @@
                 const source = this.audioContext.createMediaStreamSource(this.stream);
                 this.processor = this.audioContext.createScriptProcessor(1024, 1, 1);
                 this.processor.onaudioprocess = (event) => {
-                    // Always process audio, but at reduced gain when not speaking
                     const inputData = event.inputBuffer.getChannelData(0);
-                    const gain = this.userIsSpeaking ? 1 : 0.2; // Reduce gain when not speaking
+                    const gain = this.userIsSpeaking ? 1 : 0.2;
                     const processedData = inputData.map(sample => sample * gain);
                     this.onAudioProcess(processedData);
                 };
@@ -236,15 +235,30 @@
                 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) {
+                    
+                    if (this.samples.length > 0 || this.currentBufferIndex < this.currentBuffer.length) {
                         if (!this.isPlaying) {
                             this.isPlaying = true;
                             this.onPlaybackStart();
                         }
-                        outputBuffer.set(this.samples.shift());
+                        
+                        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;
@@ -265,15 +279,28 @@
             stop() {
                 this.audioContext.suspend();
                 this.samples = [];
+                this.currentBuffer = new Float32Array(1024);
+                this.currentBufferIndex = 0;
                 this.isPlaying = false;
             }
 
             addSamples(samples) {
-                this.samples.push(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;
             }
         }
@@ -291,8 +318,6 @@
         );
 
         function processMicrophoneInput(audioData) {
-            // Here you would typically send this data to your server for processing
-            // For now, we'll just visualize it
             updateVisualizer(audioData);
         }
 
@@ -399,7 +424,7 @@
             if (myvad) {
                 await myvad.destroy();
                 myvad = null;
-            }
+        }
             streamer.stop();
             playback.stop();
             startButton.textContent = 'Begin Call';
@@ -413,7 +438,17 @@
             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>
 </body>
-</html>
+</html>