Multi-language Text-to-Speech (TTS) app built with web technologies
If you’ve been reading my blog or watching my Twitch streams you may have already seen me talk about text-to-speech apps. If not, a quick overview:
I built a text-to-speech app for Windows using C# and Windows Presentation Framework. You can read about that app in this blog post
I built a text-to-speech app for macOS using Swift and Swift UI. You can read about that macOS app in this blog post, which also links to the streams where I built it on stream
Both of the apps have the following features:
Support for multiple languages: I also speak French and Spanish. Each has varying degrees of language support
No login required: Some text-to-speech apps require you to login and grant lots of unnecessary permissions. This is not actually a requirement by Twitch and more so seems like a way for these apps to collect your data. My apps do not need you to login since Twitch supports anonymous connections for read-only chat.
Introducing… Yet another text-to-speech app!
I built another one! This time, I chose to use web technologies. The reasons I chose to do this:
Multi-platform: Runs in the browser
Can still feel like an app: Browsers allow you to ship your app as a Progressive Web App that can be installed. I’ve enabled this capability so it can have its own icon and still feel like its own app, even though it’s just a web app
I didn’t enjoy working in C# or Windows Presentation Framework: This technology feels really clunky. If you’re familiar with Microsoft’s developer experience, you’ll probably know what I’m talking about. As someone who’s had exposure to a variety of different technologies, this is low on my list for things I enjoy working with, so I have decided to no longer support my Windows app because it does not spark joy.
Features
Supports all languages: Supports all of the languages your browser supports, which can include natural language models if supported in your browser (e.g. Edge)
Language detection (only in supported browsers including Chrome. Not currently supported in Safari or Edge)
Speak any message: Speak a message to test the language detection or to help you communicate verbally
Configure preferred languages: While your computer may support a wide variety of languages, you may not want to have TTS read out all supported languages, e.g. I have German and Japanese on my computer but I don’t understand German or Japanese so I wouldn’t include these in my preferred languages, which I’ve limited to English, French and Spanish
Configure your preferred voice based on the language: You can choose which voice you want to use for which language
Voice Customization: Configure the pitch (higher tones or lower tones), the volume, and the speed within the app.
Ignore list: Ignore specific usernames, e.g. your bots that send periodic messages.
Word replacement: Replace words so that they sound more natural, e.g. techygrrrl → techy girl to avoid mispronunciations like (teh-chey-gar-gar-gar-el)
Language and message testing and debugging: A debugging section has been added to help you test messages in different languages so you can see how your Preferred Languages, Voice Customization, and Preferred Voices configurations are applied to messages, e.g. is French being detected correctly? If not, maybe enable French in the Preferred Languages section and choose a French voice you prefer in the Preferred Voices section under French. You can also download the logs to share if there’s an issue.
Download and Install
TTS Twitch Multi-Lang is a web-based text-to-speech app and can be installed as a standalone Progressive Web App (PWA) from your favourite browser.
Visit the URL: https://tts-multilang-twitch.vercel.app
Install the Progressive Web App to have a dedicated icon (or don’t, you don’t need to)
Choosing a Browser
Each browser has its own pros and cons. Try all the browsers out that you like and see what works for you. Here’s what I recommend:
If you have a multi-language stream, choose a Chromium-based browser like Chrome or Opera. The browser-based LanguageDetector APIs are currently experimental and are not widely supported so other browsers do not yet have support for language detection using these APIs.
If you are on Windows and care about the quality of the voice but don’t need language detection because your stream is only in one language, choose Microsoft Edge. Edge gives you access to the Copilot natural language models so that the TTS messages sound more natural. Make sure you install them if you need them as they aren’t installed by default.
If none of the above apply, you can use any browser that supports text-to-speech. Chrome comes with its own voices pre-installed, while Safari on macOS uses the ones installed on macOS.
- You can use it in multiple browsers and “install” multiple web apps (PWAs). The settings you configure are stored locally in each browser so if you need to maintain separate configurations, you can use separate web browsers.
Install as a Safari app (macOS)
To install as a Safari web app:
Open the File menu from the menu bar
Click "Add to Dock"
Customize the name of the app if you want then click Add
More info about Safari web apps from Apple.
Install as a Chrome app (macOS, Windows, Linux)
To install as a Chrome app:
Click the Install button in the address bar
More info about Chrome apps from Google.
Install on Microsoft Edge (Windows)
To install as an Edge web app:
Click the "App available" icon in the menu bar
Click "Install"
More info about PWAs in Microsoft Edge.
Troubleshooting
The text-to-speech app depends on the voices you have installed on your computer. You can use the debugging section to test how the app will behave with your current configuration.
It’s a website, even when installed as a progressive web app, so first try refreshing to see if the problem goes away.
If you want to reset the app’s settings to the default settings, do the following:
Open the developer tools in your chosen browser at https://tts-multilang-twitch.vercel.app
Open the Application tab
Navigate to Storage → Local Storage in the sidebar
Clear all values by clicking the symbol 🚫
Refresh the page
If the app still continues to experience issues, export the logs and share them with me.
Uninstalling
It’s a Progressive Web App so you uninstall it based on the instructions of your browser.
Sound configuration for muting text-to-speech on stream
If you want to use text-to-speech for yourself and aren’t trying to share the audio with your stream, this may be relevant for you.
Recommended: For OBS version 28 and later, it’s recommended to use application audio sources to selectively include audio sources on Windows
For OBS version 27 or earlier on Windows, see the blog post about the Windows app here. It’s strongly recommended you upgrade OBS but if you can’t, you can use StereoMix but it’s a bit complicated to configure
For any version of OBS on macOS, you may have some luck with BlackHole but it can be a bit complicated to configure
I recommend OBS for streaming because it’s open-source and has a great community of developers behind it.
Screenshots
Progressive Web App installed for Chrome
Progressive Web App installed for Safari
Progressive Web App installed for Edge
