Jugando con las voces de Google

Desde hace ya varios meses, el traductor de Google posee una serie de opciones extras, una de las cuales nos da la posibilidad de transformar texto en voz y si bien al principio esto sólo funcionaba en su navegador Chrome, ya lo hace en otros como Firefox e incluso en IE8. La idea es buena y la modulación más que aceptable.

Todo eso, sumado a que en Chrome estan experimentando con la posibilidad de permitir comandos de voz hace que haya gente en la web buscando información y tratando de ver hasta dónde puede llegarse. En una de esas páginas se habla de usar la capacidad que tiene el traductor para reproducir textos en un sitio externo, es decir, en una página cualquiera.

¿En que se basan para decir esto? En que el sonido, eso que escuchamos, es un archivo de audio en formato MP3 que, obviamente, Google convierte o reproduce con Flash o vaya uno a saber qué hace porque Firefox y Opera no reproducen ese tipo de archivos de forma nativa.

Lo que se genera al utilizar estas cosas es, simplemente, una dirección URL de este tipo:

http://translate.google.com/translate_tts?tl=es&q=texto

donde:

tl=es es el idioma (en este caso español)
q=texto el texto a reproducir

Como es un dirección, se supone que lo lógico es usar la etiqueta AUDIO para reproducir el supuesto MP3 pero, a mi no me ha funcionado así que intenté con la vieja etiqueta EMBED:

<embed src="URL" width="300" height="40"></embed>

y esa funciona mejor, muestra el reproductor pero no se puede controlar y si no se puede controlar (volver a reproduccir, por ejemplo), lo más simple es usar un IFRAME y listo:

<iframe src="URL"></iframe>

Pero, yo quiero jugar un poco con eso y, aunque sólo funcione en Chrome, no importa, igual me divierto un rato así que voy a poner un par de DIVs con IDs en la entrada y abajo, un cuadro para que se pueda entrar un texto:

<div id="TTS" style="position:absolute;left:-1000px"></div>
<div id="TTSlink"></div>

<input type="text" value="Hola" maxlength="100" id="testTTS" name="testTTS" />

<a href="javascript:void(0);" onclick="creaTTS()">ESCUCHAR</a>
<a href="javascript:void(0);" onclick="borrarTTS()">CERRAR</a>

Los dos enlaces ejecutarán dos funciones, la primera, leerá el texto que haya escrito y escribirá el IFRAME en el DIV TTS que no veremos porque lo saco de la pantalla; el segundo, simplemente eliminará el IFRAME:

<script>
//<![CDATA[

function creaTTS() {
  var txt = document.getElementById("testTTS").value; // leo el texto
  if(txt=="") {
    txt = "Google te habla"; // si no hay nada pongo uno por defecto
  }
  // reemplazo los espacios con caracteres +
  reg = /\s+/;
  txt  = txt.replace(reg,'+');
  // creo la URL
  var url = "http://translate.google.com/translate_tts?tl=es&q=" + txt;
  // creo el HTML
  var salida = "<iframe rel='noreferrer' src='" + url + "'></iframe>";
  // y los muestro
  document.getElementById("TTS").innerHTML = salida;
  document.getElementById("TTSlink").innerHTML = url;
}

function borrarTTS() {
  var TTS = document.getElementById("TTS").innerHTML = "";
  var TTS = document.getElementById("TTSlink").innerHTML = "";
}

//]]>
</script>

El script no tiene ningún tipo de filtro así que, caracteres estrafalarios o prohibidos sólo resultarán en errores, lo mismo ocurrirá si se colocan más de 100 palabras ya que ese es el límite aceptado por Google.

Como dije, esto sólo funcionará en Chrome pero, colocando una dirección de ese tipo en otros navegadores, eventualmente, se nos abrirá la página de descarga y si aceptamos, en nuestra PC tendremos un archivo llamado translate_tts que es un archivo MP3 así que basta agregarle la extensión para escucharlo. Digo eventualmente porque sólo funciona cuando se le da la gana.