Link audio playback with current message

Nonhuman-Nonsense · Apr 20, 2024 · a3e019e · a3e019e
1 parent 63ef0d7
commit a3e019e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/client/src/components/AudioOutput.jsx b/client/src/components/AudioOutput.jsx
@@ -1,16 +1,16 @@
 // In the AudioOutput component
 import React, { useEffect, useRef } from "react";
 
-function AudioOutput({ currentAudioBuffer }) {
+function AudioOutput({ currentAudioMessage }) {
   const audioRef = useRef(null);
 
   useEffect(() => {
-    if (currentAudioBuffer) {
+    if (currentAudioMessage) {
       console.log(
         "Creating blob with ArrayBuffer of size:",
-        currentAudioBuffer.byteLength
+        currentAudioMessage.audio.byteLength
       );
-      const blob = new Blob([currentAudioBuffer], { type: "audio/mp3" });
+      const blob = new Blob([currentAudioMessage.audio], { type: "audio/mp3" });
       const url = URL.createObjectURL(blob);
       console.log("Blob URL:", url); // Check the generated URL
       audioRef.current.src = url;
@@ -23,7 +23,7 @@ function AudioOutput({ currentAudioBuffer }) {
         URL.revokeObjectURL(url);
       };
     }
-  }, [currentAudioBuffer]);
+  }, [currentAudioMessage]);
 
   return (
     <audio

diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx
@@ -17,7 +17,7 @@ function Council({ options }) {
   const [activeOverlay, setActiveOverlay] = useState("");
   const { width: screenWidth } = useWindowSize();
   const [conversation, setConversation] = useState([]); // State to store conversation updates
-  const [audioBuffers, setAudioBuffers] = useState([]); // To store multiple ArrayBuffers
+  const [audioMessages, setAudioMessages] = useState([]); // To store multiple ArrayBuffers
   const socketRef = useRef(null); // Using useRef to persist socket instance
 
   const foodsContainerStyle = {
@@ -54,8 +54,11 @@ function Council({ options }) {
     });
 
     // Listen for audio updates
-    socketRef.current.on("audio_update", (audioData) => {
-      setAudioBuffers((prevBuffers) => [...prevBuffers, audioData.audio]);
+    socketRef.current.on("audio_update", (audioMessage) => {
+      setAudioMessages((prevAudioMessages) => [
+        ...prevAudioMessages,
+        audioMessage,
+      ]);
     });
 
     return () => {
@@ -115,7 +118,7 @@ function Council({ options }) {
           >
             <Output
               conversation={conversation}
-              audioBuffers={audioBuffers}
+              audioMessages={audioMessages}
             />
           </div>
         )}

diff --git a/client/src/components/Output.jsx b/client/src/components/Output.jsx
@@ -3,17 +3,17 @@ import TextOutput from "./TextOutput";
 import AudioOutput from "./AudioOutput";
 import ConversationControls from "./ConversationControls";
 
-function Output({ conversation, audioBuffers }) {
+function Output({ conversation, audioMessages }) {
   const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const [currentSnippetIndex, setCurrentSnippetIndex] = useState(0);
   const [currentMessageTextSnippet, setCurrentMessageTextSnippet] =
     useState("");
   const [isPaused, setIsPaused] = useState(false);
 
   useEffect(() => {
-    console.log("Audio buffers length:", audioBuffers.length);
+    console.log("Audio buffers length:", audioMessages.length);
     console.log("Current audio buffer index:", currentMessageIndex);
-  }, [audioBuffers, currentMessageIndex]);
+  }, [audioMessages, currentMessageIndex]);
 
   useEffect(() => {
     if (conversation.length > 0 && !isPaused) {
@@ -35,7 +35,7 @@ function Output({ conversation, audioBuffers }) {
     }
   }, [currentMessageIndex, currentSnippetIndex, conversation, isPaused]); // Include isPaused in dependencies
 
-  const calculateDisplayTime = (text) => Math.max(3, text.length * 0.05);
+  const calculateDisplayTime = (text) => Math.max(3, text.length * 0.065);
 
   function handlePauseResume() {
     setIsPaused(!isPaused); // Toggle pause state
@@ -57,15 +57,19 @@ function Output({ conversation, audioBuffers }) {
   }
 
   return (
-    <div>
+    <div style={{ textAlign: "center", width: "75%" }}>
       <h2>
         Speaker:{" "}
         {conversation.length > 0
           ? conversation[currentMessageIndex].speaker
           : ""}
       </h2>
       <TextOutput currentMessageTextSnippet={currentMessageTextSnippet} />
-      <AudioOutput currentAudioBuffer={audioBuffers[currentMessageIndex]} />
+      <AudioOutput
+        currentAudioMessage={audioMessages.find(
+          (a) => a.message_index == currentMessageIndex
+        )}
+      />
       <ConversationControls
         isPaused={isPaused}
         onPauseResume={handlePauseResume}