Enhance word-level audio with improved audibility and visual feedback

WORD-LEVEL AUDIO IMPROVEMENTS:
- Increased volume for individual words (+20% boost) to make them more audible
- Added slower speech rate (0.8x) for individual words to improve clarity
- Enhanced visual feedback with green background and pulse animation when speaking
- Added 1-second speaking state indicator for better user experience

VISUAL ENHANCEMENTS:
- Words now show green background with pulse animation when being spoken
- Clear visual distinction between different word states (speaking, clicked, relevant)
- Improved user feedback to confirm audio is working

TECHNICAL IMPROVEMENTS:
- Better volume management for individual words vs full passage
- Enhanced speech synthesis settings for word-level audio
- Improved state management for speaking indicators

The word-level audio now provides clear visual and audio feedback,
making it much more obvious when individual words are being spoken.
Users will now easily hear and see when words are being read aloud.

Author: rgilks

app/components/TextGenerator/TranslatableWord.tsx

@@ -24,6 +24,7 @@ const TranslatableWord = memo(
     const [isHovering, setIsHovering] = useState(false);
     const [translation, setTranslation] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(false);
+    const [isSpeaking, setIsSpeaking] = useState(false);
 
     const {
       speakText,
@@ -119,8 +120,14 @@ const TranslatableWord = memo(
     );
 
     const handleClick = useCallback(() => {
+      setIsSpeaking(true);
       speakText(word, fromLang);
 
+      // Reset speaking state after a short delay
+      setTimeout(() => {
+        setIsSpeaking(false);
+      }, 1000);
+
       if (!isClicked && shouldTranslate) {
         const canAttemptTranslation =
           hover.progressionPhase === 'initial' || hover.creditsAvailable > 0;
@@ -156,6 +163,8 @@ const TranslatableWord = memo(
       combinedClassName += ' bg-yellow-300 text-black';
     } else if (isCurrentWord) {
       combinedClassName += ' bg-blue-500 text-white';
+    } else if (isSpeaking) {
+      combinedClassName += ' bg-green-500 text-white animate-pulse';
     } else if (isClicked) {
       combinedClassName += ' border-b border-dotted border-blue-400';
     } else {

app/store/audioSlice.ts

@@ -194,7 +194,10 @@ export const createAudioSlice: StateCreator<
 
     const utterance = new SpeechSynthesisUtterance(text);
     utterance.lang = SPEECH_LANGUAGES[lang];
-    utterance.volume = volume;
+    // Increase volume for individual words to make them more audible
+    utterance.volume = Math.min(volume + 0.2, 1.0);
+    // Slightly slower rate for individual words to make them clearer
+    utterance.rate = 0.8;
 
     const selectedVoiceURI = get().selectedVoiceURI;
     const selectedVoice = selectedVoiceURI