Create js/script.js

static/js/script.js

@@ -0,0 +1,67 @@
+let isRecording = false;
+let mediaRecorder;
+let recordedChunks = [];
+
+document.getElementById('recordButton').addEventListener('click', async function () {
+    if (!isRecording) {
+        startRecording();
+    } else {
+        stopRecording();
+    }
+});
+
+function startRecording() {
+    navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(function (stream) {
+            mediaRecorder = new MediaRecorder(stream);
+            mediaRecorder.start();
+
+            mediaRecorder.ondataavailable = function (e) {
+                recordedChunks.push(e.data);
+            };
+
+            document.getElementById('recordButton').textContent = 'Stop';
+            document.getElementById('recordStatus').textContent = 'Recording...';
+            isRecording = true;
+        })
+        .catch(function (err) {
+            console.log('The following error occurred: ' + err);
+        });
+}
+
+function stopRecording() {
+    mediaRecorder.stop();
+
+    mediaRecorder.onstop = function () {
+        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
+        const audioURL = window.URL.createObjectURL(blob);
+        recordedChunks = [];
+
+        document.getElementById('recordButton').textContent = 'Start';
+        document.getElementById('recordStatus').textContent = 'Tap to Record';
+        document.getElementById('transcribeContainer').style.display = 'block';
+
+        document.getElementById('transcribeButton').addEventListener('click', function () {
+            transcribeAudio(blob);
+        });
+
+        isRecording = false;
+    };
+}
+
+function transcribeAudio(blob) {
+    const formData = new FormData();
+    formData.append('audio', blob, 'audio.webm');
+
+    fetch('/transcribe', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('output').textContent = data.transcription;
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}