Update static/js/design.js

static/js/design.js

@@ -2,14 +2,12 @@ let isRecording = false;
 let mediaRecorder;
 let recordedChunks = [];
 
-// Get elements
 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');
 
-// Handle click event for the microphone container
 micContainer.addEventListener('click', function () {
     if (!isRecording) {
         startRecording();
@@ -21,28 +19,17 @@ micContainer.addEventListener('click', function () {
 function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
-            mediaRecorder = new MediaRecorder(stream);
-            
-            mediaRecorder.ondataavailable = function (e) {
-                if (e.data.size > 0) {
-                    recordedChunks.push(e.data);
-                }
-            };
-
-            mediaRecorder.onstart = function () {
-                // Update UI for recording
-                circle.classList.add('active');
-                outputContainer.textContent = 'Recording...';
-                audioPlayerContainer.style.display = 'none'; // Hide audio player initially
-                isRecording = true;
-            };
+            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
+            mediaRecorder.start();
 
-            mediaRecorder.onerror = function (e) {
-                console.error('Error recording audio:', e);
-                stopRecording(); // Stop recording on error
+            mediaRecorder.ondataavailable = function (e) {
+                recordedChunks.push(e.data);
             };
 
-            mediaRecorder.start();
+            circle.classList.add('active');
+            outputContainer.textContent = 'Recording...';
+            audioPlayerContainer.style.display = 'none'; // Hide audio player initially
+            isRecording = true;
         })
         .catch(function (err) {
             console.error('The following error occurred: ' + err);
@@ -50,24 +37,18 @@ function startRecording() {
 }
 
 function stopRecording() {
-    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-        mediaRecorder.stop();
-    }
+    mediaRecorder.stop();
 
     mediaRecorder.onstop = function () {
-        const blob = new Blob(recordedChunks, { type: 'audio/wav' });
+        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
         recordedChunks = [];
         const audioURL = window.URL.createObjectURL(blob);
 
-        // Update UI after recording
         circle.classList.remove('active');
         outputContainer.textContent = 'Click to Transcribe';
-
-        // Display audio player
         audioPlayer.src = audioURL;
-        audioPlayerContainer.style.display = 'block';
+        audioPlayerContainer.style.display = 'block'; // Show audio player
 
-        // Handle transcription
         outputContainer.addEventListener('click', handleTranscribeClick, { once: true });
         isRecording = false;
     };
@@ -78,9 +59,9 @@ function handleTranscribeClick() {
 }
 
 function transcribeAudio() {
-    const blob = new Blob(recordedChunks, { type: 'audio/wav' });
+    const blob = new Blob(recordedChunks, { type: 'audio/webm' });
     const formData = new FormData();
-    formData.append('audio', blob, 'audio.wav');
+    formData.append('audio', blob, 'audio.webm');
 
     fetch('https://jikoni-semabox.hf.space/transcribe', {
         method: 'POST',