2 files changed, 225 insertions, 0 deletions
diff --git a/files/id/web/api/speechsynthesis/index.html b/files/id/web/api/speechsynthesis/index.html
new file mode 100644
index 0000000000..78a50f3f47
--- /dev/null
+++ b/files/id/web/api/speechsynthesis/index.html
@@ -0,0 +1,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 &lt; 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 &lt; 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>
diff --git a/files/id/web/api/speechsynthesis/onvoiceschanged/index.html b/files/id/web/api/speechsynthesis/onvoiceschanged/index.html
new file mode 100644
index 0000000000..3a5a3f799c
--- /dev/null
+++ b/files/id/web/api/speechsynthesis/onvoiceschanged/index.html
@@ -0,0 +1,74 @@
+---
+title: Kk
+slug: Web/API/SpeechSynthesis/onvoiceschanged
+translation_of: Web/API/SpeechSynthesis/onvoiceschanged
+---
+<div>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</div>
+
+<p>The <code><strong>onvoiceschanged</strong></code> property of the {{domxref("SpeechSynthesis")}} interface represents an event handler that will run when the list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the <a href="/en-US/docs/Web/API/SpeechSynthesis/voiceschanged_event">voiceschanged</a> event fires.)</p>
+
+<p>This may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">speechSynthesisInstance.onvoiceschanged = function() { ... };
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This could be used to populate a list of voices that the user can choose between when the event fires (see our <a href="https://github.com/mdn/web-speech-api/blob/gh-pages/speak-easy-synthesis/script.js">Speak easy synthesis demo</a>.) Note that Firefox doesn't support it at present, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the bottom if statement seen below.</p>
+
+<pre class="brush: js">var voices = [];
+
+function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i &lt; 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;
+}</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', '#dom-speechsynthesis-onvoiceschanged', 'onvoiceschanged')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.SpeechSynthesis.onvoiceschanged")}}</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>