audio playback for both user and assistant

speech-speech/frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ChatMsg, Controls, Feed, Header } from "./components.tsx";
 import "./App.css";
 
+let userAudio: Array<Blob> = [];
 let audioBlobs: Array<Blob> = [];
 let streamBeingCaptured: MediaStream | null = null;
 let mediaRecorder: MediaRecorder | null = null;
@@ -51,15 +52,6 @@ function playRecord() {
   audio.play();
 }
 
-//function playMsg(msg: ChatMsg) {
-//  const audio = new Audio(
-//    "/speak?" +
-//    new URLSearchParams({ text: msg.content }),
-//  );
-//  console.log("loading audio and playing?");
-//  audio.play();
-//}
-
 function App() {
   const [recordState, setRecordState] = useState(false);
   const [chatState, setChatState] = useState([{
@@ -78,8 +70,10 @@ function App() {
   }
 
   function sendAudio() {
-    var formData = new FormData();
+    let formData = new FormData();
-    formData.append("audio", new Blob(audioBlobs, { type: "audio/webm" }));
+    let audio = new Blob(audioBlobs, { type: "audio/webm" });
+    userAudio.push(audio);
+    formData.append("audio", audio);
     fetch("/get-text", {
       "method": "POST",
       "body": formData,
@@ -87,7 +81,11 @@ function App() {
       .then((res) => {
         setChatState((curState: Array<ChatMsg>) => [
           ...curState,
-          { "role": "user", "content": res["user-transcript"] },
+          {
+            "role": "user",
+            "content": res["user-transcript"],
+            "audio": URL.createObjectURL(userAudio[userAudio.length - 1]),
+          },
         ]);
         fetch("/conversation", {
           "method": "POST",
@@ -99,9 +97,10 @@ function App() {
           .then((res) => {
             setChatState((
               curState: Array<ChatMsg>,
-            ) => [...curState, res]);
+            ) => [...curState, {
-           // console.log("attempting to play result");
+              ...res,
-            //playMsg(res);
+              "audio": "/speak?" + new URLSearchParams({ text: res.content }),
+            }]);
           });
       });
   }

speech-speech/frontend/src/components.tsx

@@ -9,7 +9,7 @@ import {
 export type ChatMsg = {
   role: string;
   content: string;
-  audio: any = null;
+  audio?: string;
 };
 
 export function Header() {
@@ -50,18 +50,23 @@ export function Feed(props: { chat: Array<ChatMsg>; setChatStateFn: any }) {
 }
 
 export function Msg(props: { msg: ChatMsg }) {
-  let audio;
+  //let audio;
-  if (props.msg.role == "assistant") {
+  //if (props.msg.role == "assistant") {
-    audio = (
+  //  audio = (
-      <audio
+  //    <audio
-        controls
+  //      controls
-        autoPlay
+  //      autoPlay
-        src={"/speak?" + new URLSearchParams({ text: props.msg.content })}
+  //      src={"/speak?" + new URLSearchParams({ text: props.msg.content })}
-      />
+  //    />
-    );
+  //  );
-  } else if (props.msg.audio){
+  //} else if (props.msg.audio) {
-    <div />;
+  //  audio = (
-  }
+  //    <audio
+  //      controls
+  //      src={props.msg.audio}
+  //    />
+  //  );
+  //}
   return (
     <div className="Messege text-lg">
       <span className="font-bold">
@@ -71,7 +76,11 @@ export function Msg(props: { msg: ChatMsg }) {
       <span className="ml-8">
         {props.msg.content}
       </span>
-      {audio}
+      <audio
+        controls
+        autoPlay={props.msg.role == "assistant"}
+        src={props.msg.audio}
+      />
     </div>
   );
 }