Speech text Reader with Javascript

 

course from Brad Traversy

Github code 

Features:

web speech API

HTML

toggle-button for hiding and showing the text box

the select option list will fetch from API 

textarea value pass into the message text when reading

the main show up the list of data (images and text)

CSS

hide the text box outside top of client Page and position turns down when adding classlist show

when the box is active , the box-shadow shows up

and the image fit in the box

grid the box at the main part. four columns and responsive screen setting up

JS

get the DOM needed

the data of images and text array

loop the data to get the image and the text, set the box dom and classList, then append to the main section

when clicking the box, setTextMessage() and speanText(),also for the box-shadow effect with active classname

For fetching the text and language with Web speech API. 

new message of input text value as a parameter

the text pass to message value

speakText with speecgSynthesis.speak() 

all kinds of voices stores in the array . 

fetch the voices with speechSynthesis.getVoices()

loop each kind of voice and pass into select options including name and lang

when voice changed, getVoice()

when click the toggle button, hide and show the text box with class named show.

when click the close btton in the text box, close the box removing the show class name

when select change which means the lang changed, setVoice()

set the voice name to the selected option value

when clicking the read button, set the input text value to the message text and speak out

More

another demo for this web speech API

text to speech synthesis app with Web Speech API