Summary

Add the ability for users to choose their preferred text-to-speech (TTS) voice style. Currently, the TTS voice is automatically selected based on browser/OS availability, which can result in unexpected accents (e.g., British English instead of American English).

Current Behavior

• TTS uses the browser's Web Speech API
• Voice selection is automatic, prioritizing premium/enhanced voices
• Default language is now set to en-US for generic English
• Users have no control over which voice is used

Proposed Solution

User Preferences

Add a TTS voice preference setting that allows users to:

1. Select accent/region for each language:

   • English: US, UK, Australian, etc.
   • Spanish: Spain, Mexico, Argentina, etc.
   • Other languages as applicable

2. Preview voices before selecting

3. Select specific voice from available system voices (advanced option)

Implementation Ideas

• Store preference in user settings (database) or localStorage for non-authenticated users
• Add voice preference UI in Settings page
• Pass preferred voice to useTTS hook
• Fall back gracefully if preferred voice is unavailable

UI Location

Settings → Study Preferences → Text-to-Speech Voice

Technical Notes

• Available voices vary by browser and OS
• Chrome has Google cloud voices, Safari has Apple voices, etc.
• Voice list is obtained via speechSynthesis.getVoices()
• Each voice has lang (e.g., "en-US") and name (e.g., "Google US English")

Files to Modify

• apps/next/src/hooks/use-tts.ts - Accept voice preference parameter
• apps/next/src/pages/settings/... - Add TTS preference UI
• Database schema or localStorage for persistence