Added test.html content

2023-11-27 03:58:12 -05:00
parent 91f5d8d755
commit d1d7a93b3d
1 changed files with 51 additions and 0 deletions
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Audio Recorder</title>
+</head>
+<body>
+    <h1>Record Audio and Send to Server</h1>
+    <button id="startRecord">Start Recording</button>
+    <button id="stopRecord" disabled>Stop Recording</button>
+    <button id="sendData" disabled>Send Data</button>
+    <script>
+        let mediaRecorder;
+        let audioChunks = [];
+
+        document.getElementById("startRecord").onclick = function() {
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    mediaRecorder = new MediaRecorder(stream);
+                    mediaRecorder.ondataavailable = e => {
+                        audioChunks.push(e.data);
+                    };
+                    mediaRecorder.onstop = e => {
+                        let audioBlob = new Blob(audioChunks, { 'type' : 'audio/wav; codecs=opus' });
+                        audioChunks = [];
+                        let formData = new FormData();
+                        formData.append("audio_file", audioBlob, "audio.wav");
+                        document.getElementById("sendData").onclick = function() {
+                            fetch('https://localhost:8000/recognize', {
+                                method: 'POST',
+                                body: formData
+                            }).then(response => response.json())
+                              .then(data => console.log(data))
+                              .catch(error => console.error(error));
+                        };
+                    };
+                    mediaRecorder.start();
+                    document.getElementById("startRecord").disabled = true;
+                    document.getElementById("stopRecord").disabled = false;
+                    document.getElementById("sendData").disabled = true;
+                });
+        };
+
+        document.getElementById("stopRecord").onclick = function() {
+            mediaRecorder.stop();
+            document.getElementById("startRecord").disabled = false;
+            document.getElementById("stopRecord").disabled = true;
+            document.getElementById("sendData").disabled = false;
+        };
+    </script>
+</body>
+</html>