JSFiddle - React, Tailwind, and code Playground

Web apps that talk - Introduction to the Speech Synthesis API

by abubelinha

HTML

<body>
Taken from <a href="https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API" target=_blank>here</a>.
See also <a href="http://mikelynchgames.com/game-development/using-the-speech-synthesis-api/">this</a>.
<br>And specially <a href="http://blog.teamtreehouse.com/getting-started-speech-synthesis-api" target=_blank>this</a> and it's <a href="https://codepen.io/matt-west/pen/wGzuJ" target=_blank>code</a>
<br><a href="https://stackoverflow.com/questions/21947730/chrome-speech-synthesis-with-longer-texts" target=_blank>This stackoverflow</a> solves the problem of long texts stopping TTS, but <a href="https://stackoverflow.com/questions/23483990/speechsynthesis-api-onend-callback-not-working" target=_blank>there are some other bugs</a>.
<div id="divresults" style="background:white;height:50px;overflow:auto;">
¿Que é o Fitofaladoiro? Un proxecto colaborativo de recompilación de nomes e usos populares de plantas silvestres de Galicia. ¿Quen o organiza? A Universidade de Santiago de Compostela (USC), a través do seu Herbario e Banco de Xermoplasma (SANT) e do Instituto da Lingua Galega (ILG). ¿Que procura? Rexistrar a variedade de nomes e usos das nosas plantas. Interésannos todas (desde herbas a árbores) as que se coñezan por algún nome común en calquera parte de Galicia, e tamén os aspectos culturais relacionados con elas (usos culinarios, menciñas, xogos, crenzas, refráns...). ¿Que precisa? De xente con inquedanza por preservar o noso patrimonio cultural, disposta a facer labouras de sondaxe no seu entorno xeográfico habitual. ¿Quen pode participar? Coidamos que o labor de recoller información sobre as plantas pode ser unha tarefa creativa que lles sirva aos docentes de secundaria e bacharelato para estimular a estudantes no coñecemento do seu contorno. Por iso inicialmente foi dirixida a profesorado e alumnado dos últimos cursos da ESO e de bacharelato, anque é perfectamente compatible con outros niveis...

CSS

body {background:white;}
div {border:1px solid blue;}

JavaScript

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? voice.default :'');
  document.getElementById("divconsola").innerHTML+= voice.name; 
});


var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[5]; // Note: some voices don't support altering params
/*
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World.';
msg.lang = 'en-US';
*/
msg.text = 'Hola a todos';
//msg.text=document.getElementById("divresults").textContent;
//msg.text='Cibrán Porco';
//msg.lang = 'es-ES';
msg.onend = function(e) {
  var rollo='';
  rollo+=JSON.stringify(window.speechSynthesis.getVoices());
  rollo+='<br>' + msg.text;
  rollo+='<br>Finished in ' + event.elapsedTime + ' seconds.';
  console.log(rollo);
  document.getElementById("divconsola").innerHTML+=rollo;
};

speechSynthesis.speak(msg);