Merge pull request #3 from hqnna/main

Get audio working with the visualizer

app/api/speak/route.ts

@@ -26,7 +26,7 @@ export async function POST(request: NextRequest) {
   response.headers.set("Surrogate-Control", "no-store");
   response.headers.set(
     "Cache-Control",
-    "s-maxage=0, no-store, no-cache, must-revalidate, proxy-revalidate"
+    "s-maxage=0, no-store, no-cache, must-revalidate, proxy-revalidate",
   );
   response.headers.set("Expires", "0");
 

app/components/Controls.tsx

@@ -42,7 +42,7 @@ const Controls = ({
       playAudio(await response.blob(), "audio/mp3");
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [text]
+    [text],
   );
 
   return (

app/components/Visualizer.tsx

@@ -5,12 +5,12 @@ type AudioInput = MediaStream | HTMLAudioElement;
 const interpolateColor = (
   startColor: number[],
   endColor: number[],
-  factor: number
+  factor: number,
 ): number[] => {
   const result = [];
   for (let i = 0; i < startColor.length; i++) {
     result[i] = Math.round(
-      startColor[i] + factor * (endColor[i] - startColor[i])
+      startColor[i] + factor * (endColor[i] - startColor[i]),
     );
   }
   return result;
@@ -27,16 +27,18 @@ const Visualizer: React.FC<VisualizerProps> = ({ source, context }) => {
   if (!context) {
     context = new (window.AudioContext || window.webkitAudioContext)();
   }
+
   const analyser = context.createAnalyser();
   const dataArray = new Uint8Array(analyser.frequencyBinCount);
 
   useEffect(() => {
     let audioSource: AudioNode;
 
     if (source instanceof MediaStream) {
-      audioSource = context.createMediaStreamSource(source);
+      audioSource = context!.createMediaStreamSource(source);
     } else {
-      audioSource = context.createMediaElementSource(source);
+      audioSource = context!.createMediaElementSource(source);
+      audioSource.connect(context!.destination);
     }
 
     audioSource.connect(analyser);