Javascript speech API

Stackoverflow q: https://stackoverflow.com/q/72422375/1238244

by Luke Harby

HTML

<p id="txtInput">Speak this text</p>
<button id='btnSpeak'>Speak!</button>

JavaScript

var txtInput = document.querySelector('#txtInput');
var btnSpeak = document.querySelector('#btnSpeak');
var synth = window.speechSynthesis;
var voices = [];

PopulateVoices();
if(speechSynthesis !== undefined){
    speechSynthesis.onvoiceschanged = PopulateVoices;
}

btnSpeak.addEventListener('click', ()=> {
    var toSpeak = new SpeechSynthesisUtterance(txtInput.textContent);
    toSpeak.voice = voices[7]; // Spanish
    synth.speak(toSpeak);
});

function PopulateVoices(){
    voices = synth.getVoices();
    voices.forEach((item, index) => console.log(item.name, index));
}