From 6a324cb2c22853d90dbfa73416913eefd0b39d1c Mon Sep 17 00:00:00 2001
From: Geir Eilertsen <eilertsen@corporater.com>
Date: Tue, 10 Dec 2024 16:30:23 +0100
Subject: [PATCH] Added audiorecorder html file #6

---
 .../HumanInteractionsController.java          |  8 +-
 .../main/resources/static/audiorecorder.html  | 76 +++++++++++++++++++
 2 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 marvin.interaction.web/src/main/resources/static/audiorecorder.html
diff --git a/marvin.interaction.web/src/main/java/com/assetvisor/marvin/interaction/web/controllers/HumanInteractionsController.java b/marvin.interaction.web/src/main/java/com/assetvisor/marvin/interaction/web/controllers/HumanInteractionsController.java
index 36faf6f..38a7911 100644
--- a/marvin.interaction.web/src/main/java/com/assetvisor/marvin/interaction/web/controllers/HumanInteractionsController.java
+++ b/marvin.interaction.web/src/main/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
new file mode 100644
index 0000000..081c639
--- /dev/null
+++ 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>
