Update static/js/script.js

static/js/script.js

@@ -2,15 +2,8 @@ let isRecording = false;
 let mediaRecorder;
 let recordedChunks = [];
 
-// 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 () {
+// Handles the recording button click event
+document.getElementById('recordButton').addEventListener('click', function () {
     if (!isRecording) {
         startRecording();
     } else {
@@ -21,29 +14,19 @@ micContainer.addEventListener('click', function () {
 function startRecording() {
     navigator.mediaDevices.getUserMedia({ audio: true })
         .then(function (stream) {
-            // Create a MediaRecorder instance with MIME type 'audio/wav'
-            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
+            mediaRecorder = new MediaRecorder(stream);
+            mediaRecorder.start();
 
             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.onerror = function (e) {
-                console.error('Error recording audio:', e);
-                stopRecording(); // Stop recording on error
+                recordedChunks.push(e.data);
             };
 
-            mediaRecorder.start();
+            // 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);
@@ -51,47 +34,42 @@ function startRecording() {
 }
 
 function stopRecording() {
-    if (mediaRecorder) {
-        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';
+        // 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
 
-        // Display audio player
-        audioPlayer.src = audioURL;
-        audioPlayerContainer.style.display = 'block';
+        // Set up the Transcribe button click event
+        document.getElementById('transcribeButton').addEventListener('click', function () {
+            transcribeAudio(blob);
+        });
 
-        // Handle transcription
-        outputContainer.addEventListener('click', handleTranscribeClick, { once: true });
         isRecording = false;
     };
 }
 
-function handleTranscribeClick() {
-    transcribeAudio();
-}
-
-function transcribeAudio() {
-    const blob = new Blob(recordedChunks, { type: 'audio/wav' });
+function transcribeAudio(blob) {
     const formData = new FormData();
-    formData.append('audio', blob, 'audio.wav');
+    formData.append('audio', blob, 'audio.webm');
 
-    fetch('https://jikoni-semabox.hf.space/transcribe', {
+    //fetch('https://tri4-semalab.hf.space/transcribe', { 
+    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'}`;
+        document.getElementById('output').textContent = data.transcription;
     })
     .catch(error => {
         console.error('Error:', error);
     });
-}
+}