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
|
---
title: SpeechSynthesis
slug: Web/API/SpeechSynthesis
tags:
- API
- Experimental
- Interface
- NeedsTranslation
- Reference
- SpeechSynthesis
- TopicStub
- Web Speech API
- speech
- synthesis
translation_of: Web/API/SpeechSynthesis
---
<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
<p>The <strong><code>SpeechSynthesis</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.</p>
<h2 id="Properties">Properties</h2>
<p><em><code>SpeechSynthesis</code> also inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt>
<dd>A {{domxref("Boolean")}} that returns <code>true</code> if the <code>SpeechSynthesis</code> object is in a paused state.</dd>
<dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt>
<dd>A {{domxref("Boolean")}} that returns <code>true</code> if the utterance queue contains as-yet-unspoken utterances.</dd>
<dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt>
<dd>A {{domxref("Boolean")}} that returns <code>true</code> if an utterance is currently in the process of being spoken — even if <code>SpeechSynthesis</code> is in a paused state.</dd>
</dl>
<dl>
</dl>
<h2 id="Methods">Methods</h2>
<p><em><code>SpeechSynthesis</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("SpeechSynthesis.cancel()")}}</dt>
<dd>Removes all utterances from the utterance queue.</dd>
<dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt>
<dd>Returns a list of {{domxref("SpeechSynthesisVoice")}} objects representing all the available voices on the current device.</dd>
<dt>{{domxref("SpeechSynthesis.pause()")}}</dt>
<dd>Puts the <code>SpeechSynthesis</code> object into a paused state.</dd>
<dt>{{domxref("SpeechSynthesis.resume()")}}</dt>
<dd>Puts the <code>SpeechSynthesis</code> object into a non-paused state: resumes it if it was already paused.</dd>
<dt>{{domxref("SpeechSynthesis.speak()")}}</dt>
<dd>Adds an {{domxref("SpeechSynthesisUtterance", "utterance")}} to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.</dd>
</dl>
<h2 id="Events">Events</h2>
<p>Listen to this event using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
<dl>
<dt><code><a href="/en-US/docs/Web/API/SpeechSynthesis/voiceschanged_event">voiceschanged</a></code></dt>
<dd>Fired when the list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed.<br>
Also available via the <code><a href="/en-US/docs/Web/API/SpeechSynthesis/onvoiceschanged">onvoiceschanged</a></code> property.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>In our basic <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser demo</a>, we first grab a reference to the SpeechSynthesis controller using <code>window.speechSynthesis</code>. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.</p>
<p>Inside the <code>inputForm.onsubmit</code> handler, we stop the form submitting with <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>, create a new {{domxref("SpeechSynthesisUtterance")}} instance containing the text from the text {{htmlelement("input")}}, set the utterance's voice to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.</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="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("api.SpeechSynthesis")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
</ul>
|
