Update static/js/design.js

static/js/design.js

@@ -1,11 +1,14 @@
 let isRecording = false;
-let mediaRecorder;
+let recorder;
+let audioStream;
 let recordedChunks = [];
 
 // Get the 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');
 
 // Handle the click event for the microphone container
 micContainer.addEventListener('click', function () {
@@ -19,12 +22,9 @@ micContainer.addEventListener('click', function () {
 function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
-            mediaRecorder = new MediaRecorder(stream);
-            mediaRecorder.start();
-
-            mediaRecorder.ondataavailable = function (e) {
-                recordedChunks.push(e.data);
-            };
+            audioStream = stream;
+            recorder = new Recorder(stream, { mimeType: 'audio/wav' });
+            recorder.record();
 
             // Update UI for recording
             circle.classList.add('active');
@@ -37,44 +37,53 @@ function startRecording() {
 }
 
 function stopRecording() {
-    mediaRecorder.stop();
+    recorder.stop();
+    audioStream.getTracks().forEach(track => track.stop()); // Stop the audio stream
 
-    mediaRecorder.onstop = function () {
-        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
-        recordedChunks = [];
+    recorder.exportWAV(function (blob) {
         const audioURL = window.URL.createObjectURL(blob);
 
         // Update UI after recording
         circle.classList.remove('active');
         outputContainer.textContent = 'Click to Transcribe';
 
-        // Ensure only one event listener is attached
+        // Show audio player
+        audioPlayer.src = audioURL;
+        audioPlayerContainer.style.display = 'block';
+
+        // Set up transcription
         outputContainer.removeEventListener('click', handleTranscribeClick);
-        outputContainer.addEventListener('click', handleTranscribeClick);
+        outputContainer.addEventListener('click', function() {
+            transcribeAudio(blob);
+        });
 
         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');
+    formData.append('audio', blob, 'audio.wav');
 
-    //fetch('https://tri4-semalab.hf.space/transcribe', { // https://jikoni-semabox.hf.space/transcribe
-    fetch('https://jikoni-semabox.hf.space/transcribe', { // https://tri4-semalab.hf.space/transcribe
+    fetch('https://jikoni-semabox.hf.space/transcribe', { // Update the URL as needed
         method: 'POST',
         body: formData
     })
     .then(response => response.json())
     .then(data => {
-        outputContainer.textContent = `Transcription: ${data.transcription}`;
+        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.';
+        }
     })
     .catch(error => {
         console.error('Error:', error);
+        outputContainer.textContent = 'An error occurred. Check console for details.';
     });
 }