录音回放改为单个播放按钮(无进度条),与单词读音一致

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 21:10:45 +08:00
parent b8db3ae707
commit 566d80311a
3 changed files with 35 additions and 2 deletions
@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from "react";
+import { Volume2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// 单个播放按钮:点击播放音频,不显示进度条(与单词读音一致)
+export function PlayBtn({ src, className }: { src: string; className?: string }) {
+  const [playing, setPlaying] = useState(false);
+  const play = () => {
+    const a = new Audio(src);
+    a.onended = () => setPlaying(false);
+    a.onerror = () => setPlaying(false);
+    setPlaying(true);
+    a.play();
+  };
+  return (
+    <button
+      type="button"
+      onClick={play}
+      className={cn(
+        "flex size-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 hover:bg-indigo-200",
+        playing && "bg-indigo-600 text-white",
+        className,
+      )}
+      title="播放"
+    >
+      <Volume2 className="size-4" />
+    </button>
+  );
+}