Update static/js/script.js

static/js/script.js

@@ -2,8 +2,15 @@ let isRecording = false;
 let mediaRecorder;
 let recordedChunks = [];
 
-// Handles the recording button click event
-document.getElementById('recordButton').addEventListener('click', function () {
+// Get elements
+const micContainer = document.getElementsByClassName('mic-container')[0];
+const circle = micContainer.getElementsByClassName('circle')[0];
+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();
     } else {
@@ -14,19 +21,29 @@ document.getElementById('recordButton').addEventListener('click', function () {
 function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
-            mediaRecorder = new MediaRecorder(stream);
-            mediaRecorder.start();
+            // Create a MediaRecorder instance with MIME type 'audio/wav'
+            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
 
             mediaRecorder.ondataavailable = function (e) {
-                recordedChunks.push(e.data);
+                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.onerror = function (e) {
+                console.error('Error recording audio:', e);
+                stopRecording(); // Stop recording on error
             };
 
-            // 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;
+            mediaRecorder.start();
         })
         .catch(function (err) {
             console.error('The following error occurred: ' + err);
@@ -34,40 +51,45 @@ function startRecording() {
 }
 
 function stopRecording() {
-    mediaRecorder.stop();
+    if (mediaRecorder) {
+        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);
 
-        // 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
+        // Update UI after recording
+        circle.classList.remove('active');
+        outputContainer.textContent = 'Click to Transcribe';
 
-        // Set up the Transcribe button click event
-        document.getElementById('transcribeButton').addEventListener('click', function () {
-            transcribeAudio(blob);
-        });
+        // Display audio player
+        audioPlayer.src = audioURL;
+        audioPlayerContainer.style.display = 'block';
 
+        // Handle transcription
+        outputContainer.addEventListener('click', handleTranscribeClick, { once: true });
         isRecording = false;
     };
 }
 
-function transcribeAudio(blob) {
+function handleTranscribeClick() {
+    transcribeAudio();
+}
+
+function transcribeAudio() {
+    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', { // 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', {
         method: 'POST',
         body: formData
     })
     .then(response => response.json())
     .then(data => {
-        document.getElementById('output').textContent = data.transcription;
+        outputContainer.textContent = `Transcription: ${data.transcription || 'No transcription available'}`;
     })
     .catch(error => {
         console.error('Error:', error);