Update static/js/design.js

static/js/design.js

@@ -2,13 +2,8 @@ let isRecording = false;
 let mediaRecorder;
 let recordedChunks = [];
 
-const micContainer = document.querySelector('.mic-container');
-const circle = document.querySelector('.circle');
-const outputContainer = document.getElementById('output');
-const audioPlayerContainer = document.getElementById('audioPlayerContainer');
-const audioPlayer = document.getElementById('audioPlayer');
-
-micContainer.addEventListener('click', function () {
+// Handles the recording button click event
+document.getElementById('recordButton').addEventListener('click', function () {
     if (!isRecording) {
         startRecording();
     } else {
@@ -20,58 +15,80 @@ function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
             mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
-            mediaRecorder.start();
 
             mediaRecorder.ondataavailable = function (e) {
-                recordedChunks.push(e.data);
+                if (e.data.size > 0) {
+                    recordedChunks.push(e.data);
+                }
             };
 
-            circle.classList.add('active');
-            outputContainer.textContent = 'Recording...';
-            audioPlayerContainer.style.display = 'none'; // Hide audio player initially
+            mediaRecorder.start();
+            console.log("Recording started");
+
+            // Update button text and style
+            document.getElementById('recordButton').textContent = 'Stop';
+            document.getElementById('recordButton').classList.add('recording');
+            document.getElementById('recordStatus').textContent = 'Recording...';
+            document.getElementById('transcribeContainer').style.display = 'none'; // Hide Transcribe button initially
             isRecording = true;
         })
         .catch(function (err) {
-            console.error('The following error occurred: ' + err);
+            console.error('Error accessing media devices: ', err);
         });
 }
 
 function stopRecording() {
     mediaRecorder.stop();
+    console.log("Recording stopped");
 
     mediaRecorder.onstop = function () {
         const blob = new Blob(recordedChunks, { type: 'audio/webm' });
         recordedChunks = [];
         const audioURL = window.URL.createObjectURL(blob);
 
-        circle.classList.remove('active');
-        outputContainer.textContent = 'Click to Transcribe';
-        audioPlayer.src = audioURL;
-        audioPlayerContainer.style.display = 'block'; // Show audio player
+        console.log(`Blob size: ${blob.size} bytes`); // Debugging statement
+        console.log(`Audio URL: ${audioURL}`); // Debugging statement
+
+        // Optionally, add a debug audio player to check if recording is valid
+        const debugAudio = document.createElement('audio');
+        debugAudio.controls = true;
+        debugAudio.src = audioURL;
+        document.body.appendChild(debugAudio);
+
+        // Update button text and style
+        document.getElementById('recordButton').textContent = 'Start';
+        document.getElementById('recordButton').classList.remove('recording');
+        document.getElementById('recordStatus').textContent = 'Tap to Record';
+        document.getElementById('transcribeContainer').style.display = 'block'; // Show Transcribe button
+
+        // Set up the Transcribe button click event
+        document.getElementById('transcribeButton').addEventListener('click', function () {
+            transcribeAudio(blob);
+        });
 
-        outputContainer.addEventListener('click', handleTranscribeClick, { once: true });
         isRecording = false;
     };
 }
 
-function handleTranscribeClick() {
-    transcribeAudio();
-}
-
-function transcribeAudio() {
-    const blob = new Blob(recordedChunks, { type: 'audio/webm' });
+function transcribeAudio(blob) {
     const formData = new FormData();
     formData.append('audio', blob, 'audio.webm');
 
-    fetch('https://jikoni-semabox.hf.space/transcribe', {
+    // Log FormData entries for debugging
+    for (const [key, value] of formData.entries()) {
+        console.log(`${key}: ${value}`);
+    }
+
+    fetch('https://jikoni-semabox.hf.space/transcribe', { 
         method: 'POST',
         body: formData
     })
     .then(response => response.json())
     .then(data => {
-        outputContainer.textContent = `Transcription: ${data.transcription || 'No transcription available'}`;
+        console.log(data); // Debugging statement
+        document.getElementById('output').textContent = data.transcription || 'No transcription available';
     })
     .catch(error => {
-        console.error('Error:', error);
+        console.error('Error during transcription:', error);
     });
 }