refactor audio player

Author: Raoul Straczowski

src/audio-player.ts

@@ -0,0 +1,45 @@
+const createAudioPlayer = () => {
+  const audioCache = new Map<string, HTMLAudioElement>()
+
+  const playExpression = (timeId: string, romaji: string) => {
+    const soundId = `${timeId}_${romaji.replaceAll(" ", "_")}`
+    const audioUrl = `${import.meta.env.BASE_URL}sound/voice/${soundId}.webm`
+    const audio = getOrCreateAudio(audioUrl)
+    audio.play()
+  }
+
+  const playSuccessSound = () => {
+    playActionSound('success.mp3')
+  }
+
+  const playFailSound = () => {
+    playActionSound('fail.mp3')
+  }
+
+  const playActionSound = (filename: string) => {
+    const audioUrl = `${import.meta.env.BASE_URL}sound/action/${filename}`
+    const audio = getOrCreateAudio(audioUrl)
+    audio.play()
+  }
+
+  const getOrCreateAudio = (url: string): HTMLAudioElement => {
+    if (audioCache.has(url)) {
+      const cachedAudio = audioCache.get(url)
+      if (cachedAudio) {
+        cachedAudio.currentTime = 0
+        return cachedAudio
+      }
+    }
+    const audio = new Audio(url)
+    audioCache.set(url, audio)
+    return audio
+  }
+
+  return {
+    playSuccessSound,
+    playFailSound,
+    playExpression
+  }
+}
+
+export const audioPlayer = createAudioPlayer()

src/components/ResultDisplay.tsx

@@ -1,5 +1,5 @@
 import speakerIcon from '../assets/speaker.svg'
-import { playExpression } from '../utils/play-sound'
+import { audioPlayer } from '../audio-player'
 import type { Expression } from '../types/basic'
 
 interface ResultDisplayProps {
@@ -15,7 +15,7 @@ export const ResultDisplay = ({ result, timeId, encouragementMessage }: ResultDi
 
   const handlePlayAudio = () => {
     if (timeId && result) {
-      playExpression(timeId, result.romaji)
+      audioPlayer.playExpression(timeId, result.romaji)
     }
   }
 

src/store.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { getValidExpressions, removeWhitespace } from './utils/get-valid-expressions'
-import { playSuccessSound, playFailSound, playExpression } from './utils/play-sound'
+import { audioPlayer } from './audio-player'
 import { getEncouragementMessage } from './utils/get-encouragement-message'
 import { type Expression, Difficulty, ClockDisplayMode } from './types/basic'
 import { type AppStore } from './types/app-store'
@@ -60,14 +60,14 @@ const findMatchingExpression = (userInput: string, validExpressions: Array<Expre
 const handleFailure = (set: (partial: AppStore | Partial<AppStore> | ((state: AppStore) => AppStore | Partial<AppStore>)) => void, validExpressions: Array<Expression>) => {
   const encouragementMessage = getEncouragementMessage()
   set({ allValidExpressions: validExpressions, result: null, encouragementMessage })
-  playFailSound()
+  audioPlayer.playFailSound()
 }
 
 const handleSuccess = (set: (partial: AppStore | Partial<AppStore> | ((state: AppStore) => AppStore | Partial<AppStore>)) => void, timeId: string, validExpressions: Array<Expression>, result: Expression) => {
   set({ allValidExpressions: validExpressions, result, encouragementMessage: null })
-  playSuccessSound()
+  audioPlayer.playSuccessSound()
   setTimeout(() => {
-    playExpression(timeId, result.romaji)
+    audioPlayer.playExpression(timeId, result.romaji)
   }, 700)
 }