DEV Community

Cover image for Basic Text to Speech (TTS)

Posted on


Basic Text to Speech (TTS)

This a super impromptu post, but as it turns out the window has a lot of secrets! 😱 Just kidding. They're just really cool features, and one of them is text to speech, which I tried today!

How did that happen? Well, I started working on one of pretty common interview questions that one of my friends showed to me. The problem goes like this: you put in a number into an input field and it gets translated into... words? English? So if you were to input 123 you'd get "one hundred and twenty three".

While I should have probably finished the solution to this problem, I got distracted and instead tried the text to speech feature. I am not going to talk much about the numbers problem, but there are a few nuances I want to mention.

For now, my problem only converts integers between 1 and 20 into words (I know, I know... I will finish it). If there is no number, it returns blank. If anything else is entered but numbers 1-20, you get a message saying "undefined" and the browser tells you (with voice) to ented an integer between 1 and 20.

Now that we got that lazy embarrassing stuff out of the way 🧐, how do we make the browser speak?

First, we need to define a few things:
β€’ const synth = window.speechSynthesis - the actual synthesizer
β€’ const voiceList = document.getElementById('voice-list') - the selector list for all of the voices your system comes with
β€’ const btnSpeak = document.getElementById('button-speak') - the button that we click when need a word spoken
β€’ let voices = [] - the array that we will populate with all of the voices your system comes with

Next, we will populate the selector list with all the voices:

After that simply call the function: populateVoices() and then do this: if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoices; }
. Firefox doesn't support SpeechSynthesis.onvoiceschanged and will return a list of voices when SpeechSynthesis.getVoices() runs. With Chrome we have to wait for the event to fire before populating the list.

Now all we need is to create an event listener for the button, so once we click on it, we hear speech:

Because we are not trying to make it speak whatever is in the input field, but the number converted into words, we have to define a variable that holds the .innerHTML of the converted word let numberWord = document.getElementById('words').innerHTML and pass it into SpeechSynthesisUtterance(numberWord).

Alt Text

Now, if the input is not an integer and is undefined, if will speak angrily and ask to enter an integer between 1 and 20 😈. It will only speak English in my case (or your native language you're translating digits to words), since it is not reading the numbers in the input field, but the converted words.

The complete API documentation on speech recognition and synthesis is here, and while you're checking that out, I am off to finish the number to words conversion problem 😴...

Top comments (6)

emadsaber profile image


I tried it. It's very interesting :D . I used a normal text input to speak text instead of written numbers.

It's a good information to know. Thank You. <3

sciencebae profile image


Thank you! I had a blast playing with the voices!

patarapolw profile image
Pacharapol Withayasakpunt

I have at one point created this

Also, the language name is different from mobile to desktop, I have to write a normalize script.

sciencebae profile image

Thank you for sharing your API! No doubt my thing has a lot of room for improvement. πŸ˜…

iamsbharti profile image

Just wow..will try for sure..

sciencebae profile image

When you do, make a post! Would love to learn about your experience!

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!