Twitch Chat TTS Pro
Browser-based text-to-speech overlay that reads Twitch chat messages in real-time with role-based filtering and audio visualization.
A standalone browser application that converts Twitch chat messages to speech in real-time, with per-user voice profiles, role-based access control, and a message queue system for live streamers. Runs entirely in-browser with no backend required.
- JavaScript (ES6+)
- HTML5 Audio API
- Web Audio API
- Web Speech API
- Tailwind CSS
- jQuery
- GSAP (animations)
- Twitch IRC
- BTTV/FFZ/7TV emote APIs
I built this as a complete TTS overlay for Twitch streamers—everything runs client-side in the browser, no backend or OAuth tokens required for basic use. It connects to Twitch IRC chat, filters messages by role (broadcaster, mods, VIPs, subscribers, followers), and feeds approved messages through the Web Speech API with customizable voice, pitch, rate, and volume. The UI is split into five tabs: a connection manager, TTS settings, a permissions panel to set who can trigger TTS, a message queue with approve/deny controls, and voice profiles for per-user voice assignments. Chat messages arrive in real-time at the top and feed into an approval queue below.
The architecture decouples chat ingestion, filtering, and audio output cleanly. TwitchChannel handles raw IRC parsing and emote hydration from BTTV, FFZ, and 7TV APIs. TwitchChatMessage handles the complex job of extracting and cleaning Twitch's proprietary emote format (ranges specified as code-point indices that need conversion to code units). The queue system has manual-approval mode for streamers who want to vet messages, or auto-process mode to speak everything that passes the filters. Audio visualization is optional and uses requestAnimationFrame to animate bars in sync with playback.
All settings persist to localStorage across sessions, including custom voice profiles, pronunciation mappings, and filter rules. The app includes a built-in demo mode for testing without a real Twitch connection, helpful for setup and troubleshooting. I chose HTML5 Audio and Web Audio API as runtime options—HTML5 for simplicity and browser compatibility, Web Audio for realtime effects and visualization control. The UI sits on Tailwind CSS with a dark theme optimized for OBS browser sources and stream overlays.
- Real-time Twitch IRC chat ingestion with emote hydration from BTTV, FFZ, and 7TV global/channel-specific APIs—no API key required for anonymous access
- Role-based message filtering: broadcaster, moderator, VIP, subscriber, follower detection with allow/block lists and per-user voice profile overrides
- Dual audio systems: HTML5 Audio for maximum browser compatibility, Web Audio API for advanced control, visualization, and live effects
- Message queue with manual approval/denial workflow for streamers who want editorial control over TTS output
- Persistent localStorage settings: connection state, TTS configuration, voice profiles, custom pronunciation rules, and filter lists survive page reloads