diff --git a/src/pages/GamePage/GameCode/GameCode.tsx b/src/pages/GamePage/GameCode/GameCode.tsx index efb190bd..1d386c11 100644 --- a/src/pages/GamePage/GameCode/GameCode.tsx +++ b/src/pages/GamePage/GameCode/GameCode.tsx @@ -1,8 +1,7 @@ -import { Howl } from 'howler'; import { useCallback, useMemo, useRef } from 'react'; -import soundEffect from '@/assets/audio/soundEffect.mp3'; import IngameHeader from '@/common/Ingame/IngameHeader'; import IngameRank from '@/common/Ingame/IngameRank'; +import playSoundEffect from '@/pages/GamePage/common/playSoundEffect'; import useIngameStore from '@/store/useIngameStore'; import CanvasTrack from '../common/CanvasTrack'; import TrackLine from '../common/TrackLine'; @@ -91,11 +90,9 @@ const GameCode = ({ publishIngame, userId }: GameCodeProps) => { ); const handleUpdateScore = useCallback(() => { - const sound = new Howl({ - src: [soundEffect], - }); const newScore = currentScore + scorePerSubmit; publishIngame('/info', { currentScore: newScore }); + const sound = playSoundEffect(); sound.play(); }, [currentScore, scorePerSubmit]); diff --git a/src/pages/GamePage/GameSentence/GameSentence.tsx b/src/pages/GamePage/GameSentence/GameSentence.tsx index 76d4bb91..c6138949 100644 --- a/src/pages/GamePage/GameSentence/GameSentence.tsx +++ b/src/pages/GamePage/GameSentence/GameSentence.tsx @@ -1,10 +1,9 @@ -import { Howl } from 'howler'; import { useCallback, useMemo, useRef, useState } from 'react'; -import soundEffect from '@/assets/audio/soundEffect.mp3'; import Dashboard from '@/common/Ingame/Dashboard'; import IngameHeader from '@/common/Ingame/IngameHeader'; import IngameRank from '@/common/Ingame/IngameRank'; import { SentenceNext } from '@/common/Ingame/SentenceBlocks'; +import playSoundEffect from '@/pages/GamePage/common/playSoundEffect'; import useIngameStore from '@/store/useIngameStore'; import CanvasTrack from '../common/CanvasTrack'; import TrackLine from '../common/TrackLine'; @@ -89,15 +88,12 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => { ); const scorePerTrankLength = Math.ceil((1 / TotalSpacedWord) * 100); - const handleUpdateScore: UpdateScoreType = useCallback(() => { - const sound = new Howl({ - src: [soundEffect], - }); const newScore = currentScore + scorePerTrankLength; publishIngame('/info', { currentScore: newScore, }); + const sound = playSoundEffect(); sound.play(); }, [currentScore, scorePerTrankLength]); diff --git a/src/pages/GamePage/common/playSoundEffect.ts b/src/pages/GamePage/common/playSoundEffect.ts new file mode 100644 index 00000000..e145544b --- /dev/null +++ b/src/pages/GamePage/common/playSoundEffect.ts @@ -0,0 +1,10 @@ +import { Howl } from 'howler'; +import soundEffect from '@/assets/audio/soundEffect.mp3'; + +const playSoundEffect = () => { + const sound = new Howl({ + src: [soundEffect], + }); + return sound; +}; +export default playSoundEffect;