feat: word pronunciation supported

src/views/Selection/AudioBtn.js

@@ -0,0 +1,37 @@
+import IconButton from "@mui/material/IconButton";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import { useTextAudio } from "../../hooks/Audio";
+
+export default function AudioBtn({ text, lan = "uk" }) {
+  const { error, ready, playing, play } = useTextAudio(text, lan);
+
+  if (error) {
+    return;
+  }
+
+  if (!ready) {
+    return (
+      <IconButton disabled>
+        <VolumeUpIcon />
+      </IconButton>
+    );
+  }
+
+  if (playing) {
+    return (
+      <IconButton color="primary">
+        <VolumeUpIcon />
+      </IconButton>
+    );
+  }
+
+  return (
+    <IconButton
+      onClick={() => {
+        play();
+      }}
+    >
+      <VolumeUpIcon />
+    </IconButton>
+  );
+}

src/views/Selection/DictCont.js

@@ -2,10 +2,11 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import FavBtn from "./FavBtn";
 import Typography from "@mui/material/Typography";
+import AudioBtn from "./AudioBtn";
 
 const phonicMap = {
-  en_phonic: "英",
-  us_phonic: "美",
+  en_phonic: ["英", "uk"],
+  us_phonic: ["美", "en"],
 };
 
 export default function DictCont({ dictResult }) {
@@ -27,13 +28,17 @@ export default function DictCont({ dictResult }) {
       </Stack>
 
       <Typography component="div">
-        <Typography>
+        <Stack direction="row">
           {dictResult.voice
             ?.map(Object.entries)
             .map((item) => item[0])
-            .map(([key, val]) => `${phonicMap[key] || key} ${val}`)
-            .join(" ")}
-        </Typography>
+            .map(([key, val]) => (
+              <span>
+                <span>{`${phonicMap[key]?.[0] || key} ${val}`}</span>
+                <AudioBtn text={dictResult.src} lan={phonicMap[key]?.[1]} />
+              </span>
+            ))}
+        </Stack>
         <ul style={{ margin: "0.5em 0" }}>
           {dictResult.content[0].mean.map(({ pre, cont }, idx) => (
             <li key={idx}>