refactored to useAudioPlayer2, change useAudioPlayer2 into useAudioPlayer

src/app/text-speaker/SaveList.tsx

@@ -20,7 +20,7 @@ function TextCard({ item, handleUse, handleDel }: TextCardProps) {
     handleDel(item);
   };
   return (
-    <div className="p-2 border-b-1 border-gray-200 rounded-2xl bg-gray-100 m-2 grid grid-cols-8">
+    <div className="p-2 border-b border-gray-200 rounded-2xl bg-gray-100 m-2 grid grid-cols-8">
       <div className="col-span-7" onClick={onUseClick}>
         <div className="max-h-26 hover:cursor-pointer text-3xl overflow-y-auto">
           {item.text}
@@ -70,7 +70,7 @@ export default function SaveList({ show = false, handleUse }: SaveListProps) {
   if (show)
     return (
       <div
-        className="my-4 p-2 mx-4 md:mx-32 border-1 border-gray-200 rounded-2xl"
+        className="my-4 p-2 mx-4 md:mx-32 border border-gray-200 rounded-2xl"
         style={{ fontFamily: "Times New Roman, serif" }}
       >
         <div className="flex flex-row justify-center gap-8 items-center">

src/app/text-speaker/page.tsx

@@ -30,7 +30,7 @@ export default function TextSpeaker() {
   const [ipa, setIPA] = useState<string>("");
   const objurlRef = useRef<string | null>(null);
   const [processing, setProcessing] = useState(false);
-  const { playAudio, stopAudio, audioRef } = useAudioPlayer();
+  const { play, stop, load, audioRef } = useAudioPlayer();
   useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
@@ -39,7 +39,8 @@ export default function TextSpeaker() {
       if (autopause) {
         setPause(true);
       } else {
-        playAudio(objurlRef.current!);
+        load(objurlRef.current!);
+        play();
       }
     };
     audio.addEventListener("ended", handleEnded);
@@ -77,7 +78,8 @@ export default function TextSpeaker() {
 
         if (objurlRef.current) {
           // 之前有播放
-          playAudio(objurlRef.current);
+          load(objurlRef.current);
+          play();
         } else {
           // 第一次播放
           try {
@@ -112,7 +114,8 @@ export default function TextSpeaker() {
                   };
               })(),
             );
-            playAudio(objurlRef.current);
+            load(objurlRef.current);
+            play();
           } catch (e) {
             console.error(e);
 
@@ -126,7 +129,7 @@ export default function TextSpeaker() {
     } else {
       // 如果在读就暂停
       setPause(true);
-      stopAudio();
+      stop();
     }
 
     setProcessing(false);
@@ -138,7 +141,7 @@ export default function TextSpeaker() {
     setIPA("");
     if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
     objurlRef.current = null;
-    stopAudio();
+    stop();
     setPause(true);
   };
 
@@ -147,7 +150,7 @@ export default function TextSpeaker() {
       setSpeed(new_speed);
       if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
       objurlRef.current = null;
-      stopAudio();
+      stop();
       setPause(true);
     };
   };
@@ -159,7 +162,7 @@ export default function TextSpeaker() {
     setIPA(item.ipa || "");
     if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
     objurlRef.current = null;
-    stopAudio();
+    stop();
     setPause(true);
   };
 
@@ -291,7 +294,7 @@ export default function TextSpeaker() {
             onClick={() => {
               setAutopause(!autopause);
               if (objurlRef) {
-                stopAudio();
+                stop();
               }
               setPause(true);
             }}

src/app/translator/page.tsx

@@ -20,7 +20,7 @@ export default function Translator() {
   const [sourceLocale, setSourceLocale] = useState<string | null>(null);
   const [targetLocale, setTargetLocale] = useState<string | null>(null);
   const [translating, setTranslating] = useState(false);
-  const { playAudio } = useAudioPlayer();
+  const { play, load } = useAudioPlayer();
 
   const tl = ["Chinese", "English", "Italian"];
 
@@ -132,7 +132,8 @@ export default function Translator() {
         }
 
         const url = await getTTSAudioUrl(sourceText, voice.short_name);
-        await playAudio(url);
+        await load(url);
+        await play();
         URL.revokeObjectURL(url);
       } catch (e) {
         console.error(e);
@@ -146,7 +147,8 @@ export default function Translator() {
       }
 
       const url = await getTTSAudioUrl(sourceText, voice.short_name);
-      await playAudio(url);
+      await load(url);
+      await play();
       URL.revokeObjectURL(url);
     }
   };
@@ -173,7 +175,8 @@ export default function Translator() {
     if (!voice) return;
 
     const url = await getTTSAudioUrl(targetText, voice.short_name);
-    await playAudio(url);
+    await load(url);
+    await play();
     URL.revokeObjectURL(url);
   };
 
@@ -264,7 +267,10 @@ export default function Translator() {
             >
               Italian
             </LightButton>
-            <LightButton onClick={inputLanguage} selected={!tl.includes(targetLang)}>
+            <LightButton
+              onClick={inputLanguage}
+              selected={!tl.includes(targetLang)}
+            >
               {"Other" + (tl.includes(targetLang) ? "" : ": " + targetLang)}
             </LightButton>
           </div>