Play sounds when pressing keys, completing words, and typing wrong keys

package.json

@@ -38,6 +38,7 @@
     "source-map-explorer": "^2.5.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "typescript": "^4.0.3",
+    "use-sound": "^2.0.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/@types/wav.d.ts

@@ -0,0 +1,4 @@
+declare module '*.wav' {
+  const url: string
+  export default url
+}

src/components/Word/index.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from 'react'
 import Letter, { LetterState } from '../Letter'
 import { isLegal } from '../../utils/utils'
+import useSounds from 'hooks/useSounds'
 
 const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart }) => {
   word = word.replaceAll(' ', '_')
   const [inputWord, setInputWord] = useState('')
   const [statesList, setStatesList] = useState<LetterState[]>([])
   const [isFinish, setIsFinish] = useState(false)
+  const [playKeySound, playBeepSound, playHintSound] = useSounds()
 
   const onKeydown = useCallback((e) => {
     const char = e.key
@@ -15,8 +17,9 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart })
       e.preventDefault()
     }
 
-    if (isLegal(char)) setInputWord((value) => (value += char))
-    else if (char === 'Backspace') setInputWord((value) => value.substr(0, value.length - 1))
+    if (isLegal(char)) {
+      setInputWord((value) => (value += char))
+    } else if (char === 'Backspace') setInputWord((value) => value.substr(0, value.length - 1))
   }, [])
 
   useEffect(() => {
@@ -40,20 +43,24 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart })
     const statesList: LetterState[] = []
 
     for (let i = 0; i < wordLength && i < inputWordLength; i++) {
-      if (word[i] === inputWord[i]) statesList.push('correct')
-      else {
+      if (word[i] === inputWord[i]) {
+        statesList.push('correct')
+        playKeySound()
+      } else {
         hasWrong = true
         statesList.push('wrong')
         setInputWord('')
+        playBeepSound()
         break
       }
     }
 
     if (!hasWrong && inputWordLength >= wordLength) {
+      playHintSound()
       setIsFinish(true)
     }
     setStatesList(statesList)
-  }, [inputWord, word])
+  }, [inputWord, word, playKeySound, playBeepSound, playHintSound])
 
   return (
     <div className="py-4">

src/hooks/useSounds.ts

@@ -0,0 +1,13 @@
+import useSound from 'use-sound'
+import clickSoundFileUrl from '../assets/click.wav'
+import beepSoundFileUrl from '../assets/beep.wav'
+import hintSoundFileUrl from '../assets/hint.wav'
+
+export type PlayFunction = ReturnType<typeof useSound>[0]
+
+export default function useKeySound(): [PlayFunction, PlayFunction, PlayFunction] {
+  const [playClickSound] = useSound(clickSoundFileUrl)
+  const [playBeepSound] = useSound(beepSoundFileUrl)
+  const [playSuccessSound] = useSound(hintSoundFileUrl)
+  return [playClickSound, playBeepSound, playSuccessSound]
+}

yarn.lock

@@ -5693,6 +5693,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.1.tgz#fa7051f73bf1dc92a8b8d580a40b247f91966376"
   integrity sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw==
 
+howler@^2.1.3:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.1.tgz#a521a9b495841e8bb9aa12e651bebba0affc179e"
+  integrity sha512-0iIXvuBO/81CcrQ/HSSweYmbT50fT2mIc9XMFb+kxIfk2pW/iKzDbX1n3fZmDXMEIpYvyyfrB+gXwPYSDqUxIQ==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -11355,6 +11360,13 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-sound@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/use-sound/-/use-sound-2.0.1.tgz#72e70d4bfdda71a6959e5adab0c7e10ff4080a0a"
+  integrity sha512-wNwnyIOe8QPDQgWRZd3PqVEJ9BpLO+VJX+EpQSb6EvvjblHhnYMD7WIOTQ4hgloC2jC7Az6FhclHilC441De7A==
+  dependencies:
+    howler "^2.1.3"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"