尝试增加单词发音功能

src/components/AppSettings.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useContext, useState } from 'react'
  */
 export type AppSettings = {
   sound: boolean
+  pronunciation: boolean
 }
 
 export type AppSettingsContextData = {
@@ -25,8 +26,15 @@ export function useSetSoundState(): [status: boolean, setSound: (state: boolean)
   return [settings.sound, setSound]
 }
 
+export function useSetPronunciationState(): [status: boolean, setpronunciation: (state: boolean) => void] {
+  const { settings, dispatch } = useContext(AppSettingsContext)
+  const setpronunciation = useCallback((state: boolean) => dispatch({ ...settings, pronunciation: state }), [settings, dispatch])
+  return [settings.pronunciation, setpronunciation]
+}
+
 const defaultSettings: AppSettings = {
   sound: true,
+  pronunciation: true,
 }
 
 export const AppSettingsProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {

src/components/Word/index.tsx

@@ -3,6 +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'
 
 const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wordVisible = true }) => {
   word = word.replace(new RegExp(' ', 'g'), '_')
@@ -12,6 +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 onKeydown = useCallback(
     (e) => {
@@ -59,6 +61,14 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wo
     }
   }, [hasWrong, playBeepSound])
 
+  useLayoutEffect(() => {
+    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
+  }, [isStart, hasWrong, word])
+
   useLayoutEffect(() => {
     let hasWrong = false,
       wordLength = word.length,

src/hooks/usePronouncation.ts

@@ -0,0 +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 {
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null)
+  const { pronunciation } = useAppSettings()
+  const pronounceFunction = () => {
+    audio?.pause()
+    setAudio(new Audio(pronunciationApi + word))
+  }
+
+  useEffect(() => {
+    audio?.play()
+  }, [audio])
+  return pronunciation ? pronounceFunction : noop
+}

src/icon.ts

@@ -9,6 +9,8 @@ import {
   faEyeSlash,
   faAssistiveListeningSystems,
   faCoffee,
+  faMicrophone,
+  faMicrophoneSlash,
 } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
@@ -23,4 +25,6 @@ library.add(
   faEyeSlash,
   faAssistiveListeningSystems,
   faCoffee,
+  faMicrophone,
+  faMicrophoneSlash,
 )

src/pages/Typing/Switcher/index.tsx

@@ -33,6 +33,14 @@ const Switcher: React.FC<SwitcherPropsType> = ({ state, dispatch }) => {
     },
     [dispatch],
   )
+  useHotkeys(
+    'ctrl+n',
+    (e) => {
+      e.preventDefault()
+      dispatch('pronunciation')
+    },
+    [dispatch],
+  )
 
   return (
     <div className="flex items-center justify-center space-x-3">
@@ -50,6 +58,20 @@ const Switcher: React.FC<SwitcherPropsType> = ({ state, dispatch }) => {
           <span className="py-1 px-3 text-gray-500 text-xs">开关声音（Ctrl + M）</span>
         </div>
       </div>
+      <div className="group relative">
+        <button
+          className={`${state.pronunciation ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
+          onClick={(e) => {
+            dispatch('pronunciation')
+            e.currentTarget.blur()
+          }}
+        >
+          <FontAwesomeIcon icon={state.pronunciation ? 'microphone' : 'microphone-slash'} fixedWidth />
+        </button>
+        <div className="invisible group-hover:visible absolute top-full left-1/2 w-40 -ml-20 pt-2 flex items-center justify-center">
+          <span className="py-1 px-3 text-gray-500 text-xs">开关发音（Ctrl + N）</span>
+        </div>
+      </div>
       <div className="group relative">
         <button
           className={`${state.wordVisible ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}

src/pages/Typing/hooks/useSwitcherState.ts

@@ -1,10 +1,11 @@
 import { useState } from 'react'
-import { useSetSoundState } from 'components/AppSettings'
+import { useSetPronunciationState, useSetSoundState } from 'components/AppSettings'
 
 export type SwitcherStateType = {
   phonetic: boolean
   wordVisible: boolean
   sound: boolean
+  pronunciation: boolean
 }
 
 export type SwitcherDispatchType = (type: string, newStatus?: boolean) => void
@@ -13,6 +14,7 @@ const useSwitcherState = (initialState: { phonetic: boolean; wordVisible: boolea
   const [phonetic, setPhonetic] = useState(initialState.phonetic)
   const [wordVisible, setWordVisible] = useState(initialState.wordVisible)
   const [sound, setSound] = useSetSoundState()
+  const [pronunciation, setPronunciation] = useSetPronunciationState()
 
   const dispatch: SwitcherDispatchType = (type, newStatus) => {
     switch (type) {
@@ -24,10 +26,13 @@ const useSwitcherState = (initialState: { phonetic: boolean; wordVisible: boolea
         break
       case 'sound':
         newStatus === undefined ? setSound(!sound) : setSound(newStatus)
+        break
+      case 'pronunciation':
+        newStatus === undefined ? setPronunciation(!pronunciation) : setPronunciation(newStatus)
     }
   }
 
-  return [{ phonetic, wordVisible, sound }, dispatch]
+  return [{ phonetic, wordVisible, sound, pronunciation }, dispatch]
 }
 
 export default useSwitcherState

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],