Update static/js/design.js

static/js/design.js

@@ -1,16 +1,15 @@
 let isRecording = false;
-let recorder;
-let audioStream;
+let mediaRecorder;
 let recordedChunks = [];
 
-// Get the elements
+// Get elements
 const micContainer = document.getElementsByClassName('mic-container')[0];
 const circle = micContainer.getElementsByClassName('circle')[0];
 const outputContainer = document.getElementById('output');
-const audioPlayer = document.getElementById('audioPlayer');
 const audioPlayerContainer = document.getElementById('audioPlayerContainer');
+const audioPlayer = document.getElementById('audioPlayer');
 
-// Handle the click event for the microphone container
+// Handle click event for the microphone container
 micContainer.addEventListener('click', function () {
     if (!isRecording) {
         startRecording();
@@ -22,13 +21,17 @@ micContainer.addEventListener('click', function () {
 function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
-            audioStream = stream;
-            recorder = new Recorder(stream, { mimeType: 'audio/wav' });
-            recorder.record();
+            mediaRecorder = new MediaRecorder(stream);
+            mediaRecorder.start();
+
+            mediaRecorder.ondataavailable = function (e) {
+                recordedChunks.push(e.data);
+            };
 
             // Update UI for recording
             circle.classList.add('active');
             outputContainer.textContent = 'Recording...';
+            audioPlayerContainer.style.display = 'none'; // Hide audio player initially
             isRecording = true;
         })
         .catch(function (err) {
@@ -37,53 +40,45 @@ function startRecording() {
 }
 
 function stopRecording() {
-    recorder.stop();
-    audioStream.getTracks().forEach(track => track.stop()); // Stop the audio stream
+    mediaRecorder.stop();
 
-    recorder.exportWAV(function (blob) {
+    mediaRecorder.onstop = function () {
+        const blob = new Blob(recordedChunks, { type: 'audio/wav' });
+        recordedChunks = [];
         const audioURL = window.URL.createObjectURL(blob);
 
         // Update UI after recording
         circle.classList.remove('active');
         outputContainer.textContent = 'Click to Transcribe';
 
-        // Show audio player
+        // Display audio player
         audioPlayer.src = audioURL;
         audioPlayerContainer.style.display = 'block';
 
-        // Set up transcription
-        outputContainer.removeEventListener('click', handleTranscribeClick);
-        outputContainer.addEventListener('click', function() {
-            transcribeAudio(blob);
-        });
-
+        // Handle transcription
+        document.getElementById('output').addEventListener('click', handleTranscribeClick, { once: true });
         isRecording = false;
-    });
+    };
 }
 
 function handleTranscribeClick() {
     transcribeAudio();
 }
 
-function transcribeAudio(blob) {
+function transcribeAudio() {
+    const blob = new Blob(recordedChunks, { type: 'audio/wav' });
     const formData = new FormData();
     formData.append('audio', blob, 'audio.wav');
 
-    fetch('https://jikoni-semabox.hf.space/transcribe', { // Update the URL as needed
+    fetch('https://jikoni-semabox.hf.space/transcribe', { // Replace with your API endpoint
         method: 'POST',
         body: formData
     })
     .then(response => response.json())
     .then(data => {
-        console.log('API response:', data); // Log the API response
-        if (data && data.transcription) {
-            outputContainer.textContent = `Transcription: ${data.transcription}`;
-        } else {
-            outputContainer.textContent = 'Transcription failed. Check console for details.';
-        }
+        outputContainer.textContent = `Transcription: ${data.transcription || 'No transcription available'}`;
     })
     .catch(error => {
         console.error('Error:', error);
-        outputContainer.textContent = 'An error occurred. Check console for details.';
     });
 }