Update static/js/script.js

static/js/script.js

@@ -2,6 +2,7 @@ let isRecording = false;
 let mediaRecorder;
 let recordedChunks = [];
 
+// Handles the recording button click event
 document.getElementById('recordButton').addEventListener('click', async function () {
     if (!isRecording) {
         startRecording();
@@ -20,12 +21,15 @@ function startRecording() {
                 recordedChunks.push(e.data);
             };
 
+            // 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.log('The following error occurred: ' + err);
+            console.error('The following error occurred: ' + err);
         });
 }
 
@@ -34,13 +38,16 @@ function stopRecording() {
 
     mediaRecorder.onstop = function () {
         const blob = new Blob(recordedChunks, { type: 'audio/webm' });
-        const audioURL = window.URL.createObjectURL(blob);
         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';
+        document.getElementById('transcribeContainer').style.display = 'block'; // Show Transcribe button
 
+        // Set up the Transcribe button click event
         document.getElementById('transcribeButton').addEventListener('click', function () {
             transcribeAudio(blob);
         });
@@ -53,7 +60,7 @@ function transcribeAudio(blob) {
     const formData = new FormData();
     formData.append('audio', blob, 'audio.webm');
 
-    fetch('/transcribe', {
+    fetch('https://tri4-semalab.hf.space/transcribe', { // External URL
         method: 'POST',
         body: formData
     })