---
title: SpeechSynthesis
slug: Web/API/SpeechSynthesis
translation_of: Web/API/SpeechSynthesis
---
<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>

<p>Die <strong><code>SpeechSynthesis</code></strong>-Schnittstelle der <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> ist die Controller-Schnittstelle für den Sprachdienst. Sie kann genutzt werden um Informationen über die Synthesestimmen, die auf dem Gerät verfügbar sind, zu erhalten. Außerdem um die Sprache zu starten, zu pausieren und andere Befehle auszuführen.</p>

<h2 id="Eigenschaften">Eigenschaften</h2>

<p><em><code>SpeechSynthesis</code> erbt ebenfalls Eigenschaften seiner Elternschnittstelle, {{domxref("EventTarget")}}.</em></p>

<dl>
 <dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt>
 <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn das <code>SpeechSynthesis</code>-Objekt sich im pausierten Zustand befindet.</dd>
 <dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt>
 <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn die Äußerungen-Warteschlange bisher ungesprochene Äußerungen enthält.</dd>
 <dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt>
 <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn eine Äußerung aktuell gesprochen wird — auch wenn <code>SpeechSynthesis</code> sich aktuell im pausierten Zustand befindet.</dd>
</dl>

<h3 id="Event-Handler">Event-Handler</h3>

<dl>
 <dt>{{domxref("SpeechSynthesis.onvoiceschanged")}}</dt>
 <dd>Wird ausgelöst, wenn sich die Liste von {{domxref("SpeechSynthesisVoice")}}-Objekten, die von der {{domxref("SpeechSynthesis.getVoices()")}}-Methode zurückgegeben würde, geändert hat.</dd>
</dl>

<h2 id="Methoden">Methoden</h2>

<p><em><code>SpeechSynthesis</code> erbt ebenfalls Methoden von seiner Elternschnittstelle, {{domxref("EventTarget")}}.</em></p>

<dl>
 <dt>{{domxref("SpeechSynthesis.cancel()")}}</dt>
 <dd>Entfernt alle Äußerungen aus der Äußerungen-Warteschlange.</dd>
 <dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt>
 <dd>Gibt eine Liste von {{domxref("SpeechSynthesisVoice")}}-Objecten zurück die alle verfügbaren Stimmen auf dem aktuellen Gerät repräsentiert.</dd>
 <dt>{{domxref("SpeechSynthesis.pause()")}}</dt>
 <dd>Versetzt das <code>SpeechSynthesis</code>-Objekt in den pausierten Zustand.</dd>
 <dt>{{domxref("SpeechSynthesis.resume()")}}</dt>
 <dd>Versetzt das <code>SpeechSynthesis</code>-Object in den nicht-pausierten Zustand: setzt es fort, wenn es bereits pausiert war.</dd>
 <dt>{{domxref("SpeechSynthesis.speak()")}}</dt>
 <dd>Fügt eine {{domxref("SpeechSynthesisUtterance", "Äußerung")}} Äußerung zur Äußerungen-Warteschlange hinzu; sie wird gesprochen, wenn alle anderen davor eingereihten Äußerungen fertig gesprochen wurden.</dd>
</dl>

<h2 id="Beispiele">Beispiele</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="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</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="Browserkompatibilität">Browserkompatibilität</h2>

<div>

<p>{{Compat("api.SpeechSynthesis")}}</p>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
</ul>