--- title: SpeechSynthesisUtterance slug: Web/API/SpeechSynthesisUtterance tags: - API - Experimental - Interface - NeedsTranslation - Reference - SpeechSynthesisUtterance - TopicStub - Web Speech API - speech - synthesis translation_of: Web/API/SpeechSynthesisUtterance --- <p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> <p>The <strong><code>SpeechSynthesisUtterance</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</p> <h2 id="Constructor">Constructor</h2> <dl> <dt>{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}</dt> <dd>Returns a new <code>SpeechSynthesisUtterance</code> object instance.</dd> </dl> <h2 id="Properties">Properties</h2> <p><em><code>SpeechSynthesisUtterance</code> also inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> <dl> <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt> <dd>Gets and sets the language of the utterance.</dd> <dt>{{domxref("SpeechSynthesisUtterance.pitch")}}</dt> <dd>Gets and sets the pitch at which the utterance will be spoken at.</dd> <dt>{{domxref("SpeechSynthesisUtterance.rate")}}</dt> <dd>Gets and sets the speed at which the utterance will be spoken at.</dd> <dt>{{domxref("SpeechSynthesisUtterance.text")}}</dt> <dd>Gets and sets the text that will be synthesised when the utterance is spoken.</dd> <dt>{{domxref("SpeechSynthesisUtterance.voice")}}</dt> <dd>Gets and sets the voice that will be used to speak the utterance.</dd> <dt>{{domxref("SpeechSynthesisUtterance.volume")}}</dt> <dd>Gets and sets the volume that the utterance will be spoken at.</dd> </dl> <h3 id="Event_handlers">Event handlers</h3> <dl> <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt> <dd>Fired when the spoken utterance reaches a word or sentence boundary.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt> <dd>Fired when the utterance has finished being spoken.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt> <dd>Fired when an error occurs that prevents the utterance from being succesfully spoken.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt> <dd>Fired when the spoken utterance reaches a named SSML "mark" tag.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt> <dd>Fired when the utterance is paused part way through.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt> <dd>Fired when a paused utterance is resumed.</dd> <dt>{{domxref("SpeechSynthesisUtterance.onstart")}}</dt> <dd>Fired when the utterance has begun to be spoken.</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>, use the {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} to create a new utterance instance containing the text from the text {{htmlelement("input")}}, set the utterance's {{domxref("SpeechSynthesisUtterance.voice","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('input'); var voiceSelect = document.querySelector('select'); var voices = synth.getVoices(); for(i = 0; i < voices.length ; i++) { var option = document.createElement('option'); option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; option.setAttribute('data-lang', voices[i].lang); option.setAttribute('data-name', voices[i].name); voiceSelect.appendChild(option); } 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]; } } 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', '#utterance-attributes', 'SpeechSynthesisUtterance')}}</td> <td>{{Spec2('Web Speech API')}}</td> <td> </td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> <div>{{CompatibilityTable}}</div> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>{{CompatChrome(33)}}</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>Feature</th> <th>Android</th> <th>Chrome</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>Basic support</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="See_also">See also</h2> <ul> <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> </ul>