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) {
. Firefox doesn't support
speechSynthesis.onvoiceschanged = populateVoices; }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)
.
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)
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
Hi!
Thank you! I had a blast playing with the voices!
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.
Thank you for sharing your API! No doubt my thing has a lot of room for improvement. 😅
Just wow..will try for sure..
When you do, make a post! Would love to learn about your experience!