Update static/index.html

static/index.html

@@ -18,12 +18,13 @@
         document.getElementById("recordButton").addEventListener("click", async () => {
             if (!mediaRecorder || mediaRecorder.state === "inactive") {
                 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                mediaRecorder = new MediaRecorder(stream);
+                mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
                 mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
                 mediaRecorder.onstop = async () => {
-                    const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
+                    const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
+                    const wavBlob = await convertWebMToWav(audioBlob);
                     const formData = new FormData();
-                    formData.append("file", audioBlob, "recording.wav");
+                    formData.append("file", wavBlob, "recording.wav");
                     
                     const response = await fetch("/chat/", {
                         method: "POST",
@@ -39,17 +40,80 @@
         });
         
         document.getElementById("generateButton").addEventListener("click", async () => {
-            const inputText = prompt("Enter text to convert to speech:");
-            if (inputText) {
+            const text = prompt("Enter text to convert to speech:");
+            if (text) {
                 const response = await fetch("/tts/", {
                     method: "POST",
                     headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ text:inputText})
+                    body: JSON.stringify({ text })
                 });
                 const audioData = await response.blob();
                 document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
             }
         });
+
+        async function convertWebMToWav(blob) {
+            return new Promise(resolve => {
+                const reader = new FileReader();
+                reader.onload = function () {
+                    const audioContext = new AudioContext();
+                    audioContext.decodeAudioData(reader.result, buffer => {
+                        const wavBuffer = audioBufferToWav(buffer);
+                        resolve(new Blob([wavBuffer], { type: "audio/wav" }));
+                    });
+                };
+                reader.readAsArrayBuffer(blob);
+            });
+        }
+
+        function audioBufferToWav(buffer) {
+            let numOfChan = buffer.numberOfChannels,
+                length = buffer.length * numOfChan * 2 + 44,
+                bufferArray = new ArrayBuffer(length),
+                view = new DataView(bufferArray),
+                channels = [],
+                sampleRate = buffer.sampleRate,
+                offset = 0,
+                pos = 0;
+
+            setUint32(0x46464952); // "RIFF"
+            setUint32(length - 8);
+            setUint32(0x45564157); // "WAVE"
+            setUint32(0x20746d66); // "fmt " chunk
+            setUint32(16); // length = 16
+            setUint16(1); // PCM (uncompressed)
+            setUint16(numOfChan);
+            setUint32(sampleRate);
+            setUint32(sampleRate * 2 * numOfChan);
+            setUint16(numOfChan * 2);
+            setUint16(16); // bits per sample
+            setUint32(0x61746164); // "data" chunk
+            setUint32(length - pos - 4);
+
+            for (let i = 0; i < buffer.numberOfChannels; i++)
+                channels.push(buffer.getChannelData(i));
+
+            while (pos < length) {
+                for (let i = 0; i < numOfChan; i++) {
+                    let sample = Math.max(-1, Math.min(1, channels[i][offset]));
+                    sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
+                    setUint16(sample);
+                }
+                offset++;
+            }
+
+            function setUint16(data) {
+                view.setUint16(pos, data, true);
+                pos += 2;
+            }
+
+            function setUint32(data) {
+                view.setUint32(pos, data, true);
+                pos += 4;
+            }
+
+            return bufferArray;
+        }
     </script>
 </body>
 </html>