Window: speechSynthesis property

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⁩.

ThespeechSynthesis read-only property of the Window object returns aSpeechSynthesis object, which is the entry point into usingWeb Speech API speech synthesis functionality.

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(), create a newSpeechSynthesisUtterance instance containing the text from the text<input>, set the utterance's voice 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");function populateVoiceList() {  voices = synth.getVoices();  for (const voice of voices) {    const option = document.createElement("option");    option.textContent = `${voice.name} (${voice.lang})`;    if (voice.default) {      option.textContent += " — DEFAULT";    }    option.setAttribute("data-lang", voice.lang);    option.setAttribute("data-name", voice.name);    voiceSelect.appendChild(option);  }}populateVoiceList();if (speechSynthesis.onvoiceschanged !== undefined) {  speechSynthesis.onvoiceschanged = populateVoiceList;}inputForm.onsubmit = (event) => {  event.preventDefault();  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);  const selectedOption =    voiceSelect.selectedOptions[0].getAttribute("data-name");  utterThis.voice = voices.find((v) => v.name === selectedOption);  synth.speak(utterThis);  inputTxt.blur();};