尝试增加单词发音功能

src/components/Word/index.tsx

@@ -3,7 +3,7 @@ import Letter, { LetterState } from './Letter'
 import { isLegal, isChineseSymbol } from '../../utils/utils'
 import useSounds from 'hooks/useSounds'
 import style from './index.module.css'
-import usepronunciationSound from 'hooks/usePronouncation'
+import usePronunciationSound from 'hooks/usePronouncation'
 
 const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wordVisible = true }) => {
   word = word.replace(new RegExp(' ', 'g'), '_')
@@ -13,7 +13,7 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wo
   const [isFinish, setIsFinish] = useState(false)
   const [hasWrong, setHasWrong] = useState(false)
   const [playKeySound, playBeepSound, playHintSound] = useSounds()
-  const [playPronounce] = usepronunciationSound(word)
+  const playPronounce = usePronunciationSound(word)
 
   const onKeydown = useCallback(
     (e) => {
@@ -62,12 +62,12 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wo
   }, [hasWrong, playBeepSound])
 
   useLayoutEffect(() => {
-    if (inputWord.length === 0) {
+    if (isStart && inputWord.length === 0) {
       playPronounce()
     }
     // SAFETY: Don't depend on `playPronounce`! It will cost audio play again and again.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputWord])
+  }, [isStart, hasWrong, word])
 
   useLayoutEffect(() => {
     let hasWrong = false,

src/hooks/usePronouncation.ts

@@ -1,17 +1,21 @@
 import { useAppSettings } from 'components/AppSettings'
 import { noop } from 'lodash'
+import { useEffect, useState } from 'react'
 
 declare type PronounceFunction = () => void
 
 const pronunciationApi = 'http://dict.youdao.com/dictvoice?audio='
 
-export default function usepronunciationSound(word: string): [PronounceFunction] {
-  // SAFETY: We are trying to build an hook here.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+export default function usePronunciationSound(word: string): PronounceFunction {
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null)
   const { pronunciation } = useAppSettings()
   const pronounceFunction = () => {
-    var audio = new Audio(pronunciationApi + word)
-    audio.play()
+    audio?.pause()
+    setAudio(new Audio(pronunciationApi + word))
   }
-  return pronunciation ? [pronounceFunction] : [noop]
+
+  useEffect(() => {
+    audio?.play()
+  }, [audio])
+  return pronunciation ? pronounceFunction : noop
 }

src/pages/Typing/index.tsx

@@ -162,6 +162,10 @@ const App: React.FC = () => {
     (dictName: string) => {
       setOrder(0)
       setIsLoading(true)
+      // Need to stop the game, in order to prevent pronounce wrong word.
+      // Besides, it makes sense because users are about to stop when they change dict/chapter.
+      // Otherwise, introduce a new parameter to allow pronunciation begin.
+      setIsStart(false)
       wordListDispatch('setDictName', dictName, () => {
         setIsLoading(false)
       })
@@ -172,6 +176,7 @@ const App: React.FC = () => {
   const changeChapter = useCallback(
     (chapter: number) => {
       setOrder(0)
+      setIsStart(false) // Same story as above.
       wordListDispatch('setChapter', chapter)
     },
     [wordListDispatch],