Added audiorecorder html file

#6
geir-eilertsen · Dec 10, 2024 · 6a324cb · 6a324cb
1 parent 8cb83cc
commit 6a324cb
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 4 deletions.
diff --git a/...n/java/com/assetvisor/marvin/interaction/web/controllers/HumanInteractionsController.java b/...n/java/com/assetvisor/marvin/interaction/web/controllers/HumanInteractionsController.java
@@ -21,17 +21,17 @@ public class HumanInteractionsController {
     private AudioBuffer audioBuffer;
 
     @PostMapping("/message")
-    public void chat(@RequestParam(value = "message") String message) {
+    public void message(@RequestParam(value = "message") String message) {
         listenUseCase.listenTo(message);
     }
 
-    @PostMapping("/speech")
-    public void chat(@RequestBody byte[] message) {
+    @PostMapping(path = "/speech", consumes = "application/octet-stream")
+    public void speech(@RequestBody byte[] message) {
         listenUseCase.listenTo(message);
     }
 
     @GetMapping("/speech")
-    public ResponseEntity<byte[]> chat() {
+    public ResponseEntity<byte[]> speech() {
         byte[] audioData = audioBuffer.get();
 
         if (audioData == null || audioData.length == 0) {

diff --git a/marvin.interaction.web/src/main/resources/static/audiorecorder.html b/marvin.interaction.web/src/main/resources/static/audiorecorder.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Audio Recorder</title>
+</head>
+<body>
+<h1>Audio Recorder</h1>
+<button id="startBtn">Start Recording</button>
+<button id="stopBtn" disabled>Stop Recording</button>
+<p id="status">Press "Start Recording" to begin.</p>
+
+<script>
+  let mediaRecorder;
+  let audioChunks = [];
+
+  document.getElementById('startBtn').addEventListener('click', async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaRecorder = new MediaRecorder(stream);
+      audioChunks = [];
+
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunks.push(event.data);
+        }
+      };
+
+      mediaRecorder.onstop = async () => {
+        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+        const arrayBuffer = await audioBlob.arrayBuffer();
+        const byteArray = new Uint8Array(arrayBuffer);
+
+        document.getElementById('status').innerText = "Uploading audio...";
+
+        // Post the byte array to the server
+        fetch('/speech', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/octet-stream' },
+          body: byteArray
+        })
+        .then((response) => {
+          if (response.ok) {
+            document.getElementById('status').innerText = "Audio uploaded successfully!";
+          } else {
+            document.getElementById('status').innerText = "Failed to upload audio.";
+          }
+        })
+        .catch((error) => {
+          console.error('Error uploading audio:', error);
+          document.getElementById('status').innerText = "An error occurred.";
+        });
+      };
+
+      mediaRecorder.start();
+      document.getElementById('status').innerText = "Recording...";
+      document.getElementById('startBtn').disabled = true;
+      document.getElementById('stopBtn').disabled = false;
+    } catch (error) {
+      console.error('Error accessing microphone:', error);
+      document.getElementById('status').innerText = "Error accessing microphone.";
+    }
+  });
+
+  document.getElementById('stopBtn').addEventListener('click', () => {
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+      mediaRecorder.stop();
+      document.getElementById('status').innerText = "Stopped recording.";
+      document.getElementById('startBtn').disabled = false;
+      document.getElementById('stopBtn').disabled = true;
+    }
+  });
+</script>
+</body>
+</html>