Update static/js/design.js

static/js/design.js

@@ -21,11 +21,14 @@ micContainer.addEventListener('click', function () {
 function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
-            mediaRecorder = new MediaRecorder(stream);
+            // Create a MediaRecorder instance with MIME type 'audio/wav'
+            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
             mediaRecorder.start();
 
             mediaRecorder.ondataavailable = function (e) {
-                recordedChunks.push(e.data);
+                if (e.data.size > 0) {
+                    recordedChunks.push(e.data);
+                }
             };
 
             // Update UI for recording
@@ -43,7 +46,7 @@ function stopRecording() {
     mediaRecorder.stop();
 
     mediaRecorder.onstop = function () {
-        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
+        const blob = new Blob(recordedChunks, { type: 'audio/wav' });
         recordedChunks = [];
         const audioURL = window.URL.createObjectURL(blob);
 
@@ -56,7 +59,7 @@ function stopRecording() {
         audioPlayerContainer.style.display = 'block';
 
         // Handle transcription
-        document.getElementById('output').addEventListener('click', handleTranscribeClick, { once: true });
+        outputContainer.addEventListener('click', handleTranscribeClick, { once: true });
         isRecording = false;
     };
 }
@@ -66,12 +69,10 @@ function handleTranscribeClick() {
 }
 
 function transcribeAudio() {
-    // Convert Blob to WAV format
-    const blob = new Blob(recordedChunks, { type: 'audio/webm' });
+    const blob = new Blob(recordedChunks, { type: 'audio/wav' });
     const formData = new FormData();
-    formData.append('audio', blob, 'audio.webm');
+    formData.append('audio', blob, 'audio.wav');
 
-    //fetch('https://tri4-semalab.hf.space/transcribe', {
     fetch('https://jikoni-semabox.hf.space/transcribe', {
         method: 'POST',
         body: formData