diff --git a/app/components/voice.tsx b/app/components/voice.tsx
index 6752f70f4..fab02d413 100644
--- a/app/components/voice.tsx
+++ b/app/components/voice.tsx
@@ -1,25 +1,31 @@
 // implement a voice component by speech synthesis to read the text with the voice of the user's choice
 import * as React from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { IconButton } from "./button";
 import VoiceIcon from "../icons/voice.svg";
 
-const voices = window.speechSynthesis.getVoices();
 const speak = ({
   text,
   voice,
 }: {
   text: string;
-  voice?: SpeechSynthesisVoice;
+  voice: SpeechSynthesisVoice;
 }) => {
-  if (!text) return;
+  if (!window || !text) return;
   const utterance = new SpeechSynthesisUtterance(text);
-  utterance.voice = voice || voices[0];
+  utterance.voice = voice;
   window.speechSynthesis.speak(utterance);
 };
 export function Voice(props: { text: string }) {
+  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);
   const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null);
 
+  useEffect(() => {
+    const voices = window.speechSynthesis.getVoices();
+    setVoices(voices);
+    setVoice(voices[0]);
+  }, []);
+
   return props.text ? (
     <div>
       <IconButton