DEV Community

Cover image for Basic Text to Speech (TTS)
Julia
Julia

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)

Collapse
 
emadsaber profile image
emadsaber

Hello,

I tried it. It's very interesting :D . I used a normal text input to speak text instead of written numbers. codepen.io/emadsaber2013/pen/RwPPwVz

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

Collapse
 
sciencebae profile image
Julia

Hi!

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

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

I have at one point created this github.com/patarapolw/tts-api

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

Collapse
 
sciencebae profile image
Julia

Thank you for sharing your API! No doubt my thing has a lot of room for improvement. 😅

Collapse
 
iamsbharti profile image
Iamsbharti

Just wow..will try for sure..

Collapse
 
sciencebae profile image
Julia

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