SpeechSynthesisUtterance

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2018⁩.

* Some parts of this feature may have varying levels of support.

TheSpeechSynthesisUtterance interface of theWeb Speech API 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.)

Constructor

SpeechSynthesisUtterance(): Returns a newSpeechSynthesisUtterance object instance.

Instance properties

SpeechSynthesisUtterance also inherits properties from its parent interface,EventTarget.

SpeechSynthesisUtterance.lang: Gets and sets the language of the utterance.
SpeechSynthesisUtterance.pitch: Gets and sets the pitch at which the utterance will be spoken at.
SpeechSynthesisUtterance.rate: Gets and sets the speed at which the utterance will be spoken at.
SpeechSynthesisUtterance.text: Gets and sets the text that will be synthesized when the utterance is spoken.
SpeechSynthesisUtterance.voice: Gets and sets the voice that will be used to speak the utterance.
SpeechSynthesisUtterance.volume: Gets and sets the volume that the utterance will be spoken at.

Events

Listen to these events usingaddEventListener() or by assigning an event listener to theoneventname property of this interface.

boundary: Fired when the spoken utterance reaches a word or sentence boundary.Also available via theonboundary property.
end: Fired when the utterance has finished being spoken.Also available via theonend property.
error: Fired when an error occurs that prevents the utterance from being successfully spoken.Also available via theonerror property
mark: Fired when the spoken utterance reaches a named SSML "mark" tag.Also available via theonmark property.
pause: Fired when the utterance is paused part way through.Also available via theonpause property.
resume: Fired when a paused utterance is resumed.Also available via theonresume property.
start: Fired when the utterance has begun to be spoken.Also available via theonstart property.

Examples

In our basicSpeech synthesizer demo, we first grab a reference to the SpeechSynthesis controller usingwindow.speechSynthesis.After defining some necessary variables, we retrieve a list of the voices available usingSpeechSynthesis.getVoices() and populate a select menu with them so the user can choose what voice they want.

Inside theinputForm.onsubmit handler, we stop the form submitting withpreventDefault(), use theconstructor to create a new utterance instance containing the text from the text<input>, set the utterance'svoice to the voice selected in the<select> element, and start the utterance speaking via theSpeechSynthesis.speak() method.

const synth = window.speechSynthesis;const inputForm = document.querySelector("form");const inputTxt = document.querySelector("input");const voiceSelect = document.querySelector("select");let voices;function loadVoices() {  voices = synth.getVoices();  for (const [i, voice] of voices.entries()) {    const option = document.createElement("option");    option.textContent = `${voice.name} (${voice.lang})`;    option.value = i;    voiceSelect.appendChild(option);  }}// in Google Chrome the voices are not ready on page loadif ("onvoiceschanged" in synth) {  synth.onvoiceschanged = loadVoices;} else {  loadVoices();}inputForm.onsubmit = (event) => {  event.preventDefault();  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);  utterThis.voice = voices[voiceSelect.value];  synth.speak(utterThis);  inputTxt.blur();};