diff --git a/src/message.tsx b/src/message.tsx
index 681482d..7ccff1d 100644
--- a/src/message.tsx
+++ b/src/message.tsx
@@ -130,11 +130,7 @@ export default function Message(props: Props) {
               </div>
             )}
             <hr className="mt-2" />
-            <TTSPlay
-              chat={chat}
-              chatStore={chatStore}
-              setChatStore={setChatStore}
-            />
+            <TTSPlay chat={chat} />
             <div className="w-full flex justify-between">
               <DeleteIcon />
               <button onClick={() => setShowEdit(true)}>🖋</button>
diff --git a/src/tts.tsx b/src/tts.tsx
index 8da04e1..35b4a91 100644
--- a/src/tts.tsx
+++ b/src/tts.tsx
@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
 import { ChatStore, ChatStoreMessage, addTotalCost } from "./app";
 import { Message, getMessageText } from "./chatgpt";
 
@@ -7,10 +7,22 @@ interface TTSProps {
   chat: ChatStoreMessage;
   setChatStore: (cs: ChatStore) => void;
 }
-export function TTSPlay(props: TTSProps) {
+interface TTSPlayProps {
+  chat: ChatStoreMessage;
+}
+export function TTSPlay(props: TTSPlayProps) {
+  const src = useMemo(() => {
+    if (props.chat.audio instanceof Blob) {
+      return URL.createObjectURL(props.chat.audio);
+    }
+    return "";
+  }, [props.chat.audio]);
+
+  if (props.chat.hide) {
+    return <></>;
+  }
   if (props.chat.audio instanceof Blob) {
-    const url = URL.createObjectURL(props.chat.audio);
-    return <audio src={url} controls />;
+    return <audio className="w-full" src={src} controls />;
   }
   return <></>;
 }