1+ // https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
2+ // https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
3+ 4+ const main = document . querySelector ( "main" ) ;
5+ const buttonInsertText = document . querySelector ( '.btn-toggle' ) ;
6+ const buttonReadText = document . querySelector ( '#read' )
7+ const divTextBox = document . querySelector ( '.text-box' )
8+ const closeDivTextBox = document . querySelector ( '.close' )
9+ const selectElement = document . querySelector ( 'select' )
10+ const textArea = document . querySelector ( 'textarea' )
11+ 12+ const humanExpressions = [
13+ { img : './img/drink.jpg' , text : 'Estou com sede' } ,
14+ { img : './img/food.jpg' , text : 'Estou com fome' } ,
15+ { img : './img/tired.jpg' , text : 'Estou cansado' } ,
16+ { img : './img/hurt.jpg' , text : 'Estou machucado' } ,
17+ { img : './img/happy.jpg' , text : 'Estou feliz' } ,
18+ { img : './img/angry.jpg' , text : 'Estou com raiva' } ,
19+ { img : './img/sad.jpg' , text : 'Estou triste' } ,
20+ { img : './img/scared.jpg' , text : 'Estou com medo' } ,
21+ { img : './img/outside.jpg' , text : 'Quero ir la fora' } ,
22+ { img : './img/home.jpg' , text : 'Quero ir para casa' } ,
23+ { img : './img/school.jpg' , text : 'Quero ir para escola' } ,
24+ { img : './img/grandma.jpg' , text : 'Quero ver vovó' }
25+ ] ;
26+ 27+ const utterance = new SpeechSynthesisUtterance ( )
28+ // console.log(utterance)
29+ 30+ const setTextMessage = text => {
31+ utterance . text = text
32+ }
33+ 34+ const speakText = ( ) => {
35+ speechSynthesis . speak ( utterance )
36+ }
37+ 38+ const setVoice = event => {
39+ console . log ( event . target . value )
40+ const selectedVoice = voices . find ( voice => voice . name === event . target . value )
41+ utterance . voice = selectedVoice
42+ }
43+ 44+ const addExpressionsBoxesIntoDOM = ( ) => {
45+ main . innerHTML = humanExpressions . map ( ( { img, text} ) =>
46+ `<div class="expression-box" data-js='${ text }
47+ <img src="${ img } ${ text } ${ text }
48+ <p class="info" data-js='${ text } ${ text }
49+ </div>`
50+ ) . join ( '' )
51+ }
52+ 53+ addExpressionsBoxesIntoDOM ( )
54+ 55+ const setStyleOfClickedDiv = dataValue => {
56+ const div = document . querySelector ( `[data-js="${ dataValue } )
57+ div . classList . add ( 'active' )
58+ setTimeout ( ( ) => {
59+ div . classList . remove ( 'active' )
60+ } , 1000 )
61+ }
62+ 63+ main . addEventListener ( 'click' , event => {
64+ const clickedElement = event . target
65+ const clickedElementText = clickedElement . dataset . js
66+ 67+ const clickedElementTextMustBeSpoken = [ 'IMG' , 'P' ] . some ( elementName => clickedElement . tagName . toLowerCase ( ) === elementName . toLowerCase ( ) )
68+ 69+ if ( clickedElementTextMustBeSpoken ) {
70+ // console.log(clickedElement.tagName)
71+ setTextMessage ( clickedElementText )
72+ speakText ( )
73+ setStyleOfClickedDiv ( clickedElementText )
74+ }
75+ } )
76+ 77+ const insertOptionElementsIntoDOM = voices => {
78+ selectElement . innerHTML = voices . reduce ( ( accumulator , { name, lang} ) => {
79+ accumulator += `<option value="${ name } ${ lang } ${ name }
80+ return accumulator
81+ } , '' )
82+ }
83+ 84+ const setPTBRVoices = voices => {
85+ // console.log(voices.find(voice => voice.name === 'Google português do Brasil'))
86+ const googleVoice = voices . find ( voice => voice . name === 'Google português do Brasil' )
87+ 88+ if ( googleVoice ) {
89+ utterance . voice = googleVoice
90+ const googleOptionElement = selectElement . querySelector ( `[value="${ googleVoice . name } )
91+ googleOptionElement . selected = true
92+ }
93+ }
94+ 95+ let voices = [ ]
96+ 97+ // console.log(speechSynthesis)
98+ speechSynthesis . addEventListener ( 'voiceschanged' , ( ) => {
99+ voices = speechSynthesis . getVoices ( )
100+ 101+ insertOptionElementsIntoDOM ( voices )
102+ setPTBRVoices ( voices )
103+ } )
104+ 105+ buttonInsertText . addEventListener ( 'click' , ( ) => {
106+ divTextBox . classList . add ( 'show' )
107+ } )
108+ 109+ closeDivTextBox . addEventListener ( 'click' , ( ) => {
110+ divTextBox . classList . remove ( 'show' )
111+ } )
112+ 113+ selectElement . addEventListener ( 'change' , setVoice )
114+ 115+ buttonReadText . addEventListener ( 'click' , ( ) => {
116+ setTextMessage ( textArea . value )
117+ speakText ( )
118+ } )
0 commit comments