Return to Blog Home

Twitch Chat Text-To-Speech

 

Twitch Chat Text-To-Speech

Now even viewers can hear a fast chat!

Having recently been introduced to the Web Speech API, I was trying to think of unique applications and went with a userscript that would read aloud Highlighted (and possibly other) messages in a Twitch chat, but for the user!

While this was far from my first time creating a userscript, I was only interested in a MVP, so ditched my beloved TS and went pure JS. I did invite a MutationObserver() for the journey, as it was what I would use to tell me when new messages entered the chat, well after I filtered out all the non-chat elements that were occasionally added.

After that I only needed to format the username and message in a "X said Y" format, and pass this newly generated message to SpeechSynthesisUtterance() I would pass to SpeechSynthesis.speak() and be done with it!

Customization

Of course there was more I could customize, of which my first was having it only read highlighted messages, and in the future would the ability to add a list of usernames to always read, messages to read if they match a query, etc.