1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
---
title: SpeechSynthesis
slug: Web/API/SpeechSynthesis
tags:
- API
- Elocução
- Experimental
- Fala
- Interface
- Referencia
- SpeechSynthesis
- Web Speech API
- sintetização
translation_of: Web/API/SpeechSynthesis
---
<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
<p>A interface <strong><code>SpeechSynthesis</code></strong> da <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> é a interface controladora para o serviço de fala; este pode ser usado para obter informações sobre as vozes sintetizadas disponíveis no dispositivo, reproduzir e pausar uma elocução, além de outros comandos.</p>
<h2 id="Propriedades">Propriedades</h2>
<p><em><code>SpeechSynthesis</code> também herda propriedades da sua interface pai, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt>
<dd>Um {{domxref("Boolean")}} que retorna <code>true</code> se o objeto <code>SpeechSynthesis</code> está em estado de pausa.</dd>
<dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt>
<dd>Um {{domxref("Boolean")}} que retorna <code>true</code> se a fila de elocuções contém falas que ainda não foram reproduzidas.</dd>
<dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt>
<dd>Um {{domxref("Boolean")}} que retorna <code>true</code> se uma elocução está sendo reproduzida atualmente — mesmo que <code>SpeechSynthesis</code> esteja em estado de pausa.</dd>
</dl>
<h3 id="Tratamento_de_eventos">Tratamento de eventos</h3>
<dl>
<dt>{{domxref("SpeechSynthesis.onvoiceschanged")}}</dt>
<dd>Disparado quando a lista de objetos {{domxref("SpeechSynthesisVoice")}} que pode ser retornada pelo método {{domxref("SpeechSynthesis.getVoices()")}} mudou.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<p><em><code>SpeechSynthesis</code> também herda métodos da sua interface pai, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("SpeechSynthesis.cancel()")}}</dt>
<dd>Remove todas as elocuções da fila para reprodução.</dd>
<dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt>
<dd>Retorna uma lista de objetos {{domxref("SpeechSynthesisVoice")}} representando todas as vozes disponíveis no dispositivo atuall</dd>
<dt>{{domxref("SpeechSynthesis.pause()")}}</dt>
<dd>Deixa o objeto <code>SpeechSynthesis</code> em estado de pausa.</dd>
<dt>{{domxref("SpeechSynthesis.resume()")}}</dt>
<dd>Retira o estado de pausa do objeto <code>SpeechSynthesis</code>: retoma a reprodução se ele estiver pausado.</dd>
<dt>{{domxref("SpeechSynthesis.speak()")}}</dt>
<dd>Adiciona uma {{domxref("SpeechSynthesisUtterance", "utterance")}} à fila de reprodução; ela será reproduzida assim que todas as elocuções enfileiradas anteriormente tenham sido reproduzidas.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Na nossa demonstração básica <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser demo</a>, nós primeiro pegamos uma referência para o controlador SpeechSynthesis usando <code>window.speechSynthesis</code>. Após definir algumas variáveis necessárias, nós obtemos uma lista de vozes disponíveis usando o método {{domxref("SpeechSynthesis.getVoices()")}} usando-as para popular um menu de seleção de forma que o usuário possa escolher a voz que desejar.</p>
<p>Dentro do tratamento <code>inputForm.onsubmit</code>, nós impedimos a submissão do formulário com <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>, instanciamos uma {{domxref("SpeechSynthesisUtterance")}} contendo o texto presente no {{htmlelement("input")}}, atribuímos a voz da elocução para a voz selecionada no elemento {{htmlelement("select")}}, e iniciamos a reprodução da elocução através do método {{domxref("SpeechSynthesis.speak()")}}.</p>
<pre class="brush: js">var synth = window.speechSynthesis;
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');
var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');
var voices = [];
function populateVoiceList() {
voices = synth.getVoices();
for(i = 0; i < voices.length ; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
if(voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
inputForm.onsubmit = function(event) {
event.preventDefault();
var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length ; i++) {
if(voices[i].name === selectedOption) {
utterThis.voice = voices[i];
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
inputTxt.blur();
}</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Situação</th>
<th scope="col">Comentários</th>
</tr>
<tr>
<td>{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}</td>
<td>{{Spec2('Web Speech API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatChrome(33)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(49)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>2.0</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>7.1</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
</ul>
|
