Fix: Initial runtime errors with integration

index.html

@@ -44,15 +44,13 @@
                 if (event.data instanceof Blob) {
                     const reader = new FileReader();
                     reader.onload = function() {
-                        const arrayBuffer = this.result;
-                        // Ensure audioContext is initialized before decoding
+                        // The server sends raw PCM; we need to wrap it in a WAV header
+                        const pcmData = new Int16Array(this.result);
+                        const wavBlob = createWavBlob(pcmData, 1, 16000);
                         if (audioContext) {
-                            audioContext.decodeAudioData(arrayBuffer, (buffer) => {
-                            audioQueue.push(buffer);
-                            if (!isPlaying) {
-                                playNextInQueue();
-                            }
-                        });
+                            audioQueue.push(wavBlob);
+                            if (!isPlaying) playNextInQueue();
+                        }
                     };
                     reader.readAsArrayBuffer(event.data);
                 } else {
@@ -75,21 +73,53 @@
             };
         };
 
-        const playNextInQueue = () => {
+        const playNextInQueue = async () => {
             if (audioQueue.length > 0) {
                 isPlaying = true;
-                const buffer = audioQueue.shift();
-                const source = audioContext.createBufferSource();
-                source.buffer = buffer;
-                source.connect(audioContext.destination);
-                source.onended = () => {
+                const blob = audioQueue.shift();
+                try {
+                    const arrayBuffer = await blob.arrayBuffer();
+                    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+                    const source = audioContext.createBufferSource();
+                    source.buffer = audioBuffer;
+                    source.connect(audioContext.destination);
+                    source.onended = playNextInQueue; // Chain the next playback
+                    source.start();
+                } catch (e) {
+                    console.error("Error decoding or playing audio:", e);
                     isPlaying = false;
-                    playNextInQueue();
-                };
-                source.start();
+                    playNextInQueue(); // Try the next one
+                }
+            } else {
+                isPlaying = false;
             }
         };
 
+        // Helper function to create a WAV blob from raw PCM data
+        const createWavBlob = (pcmData, numChannels, sampleRate) => {
+            const header = new ArrayBuffer(44);
+            const view = new DataView(header);
+            const pcmLength = pcmData.length * 2; // 16-bit samples
+
+            // RIFF header
+            view.setUint32(0, 0x52494646, false); // "RIFF"
+            view.setUint32(4, 36 + pcmLength, true);
+            view.setUint32(8, 0x57415645, false); // "WAVE"
+            // "fmt " sub-chunk
+            view.setUint32(12, 0x666d7420, false); // "fmt "
+            view.setUint32(16, 16, true); // Sub-chunk size
+            view.setUint16(20, 1, true); // Audio format (1 for PCM)
+            view.setUint16(22, numChannels, true);
+            view.setUint32(24, sampleRate, true);
+            view.setUint32(28, sampleRate * numChannels * 2, true); // Byte rate
+            view.setUint16(32, numChannels * 2, true); // Block align
+            view.setUint16(34, 16, true); // Bits per sample
+            view.setUint32(36, 0x64617461, false); // "data"
+            view.setUint32(40, pcmLength, true);
+
+            return new Blob([header, pcmData], { type: 'audio/wav' });
+        };
+
         startButton.onclick = async () => {
             // AudioContext must be created or resumed by a user gesture.
             if (!audioContext) {