Clínica HTML5: haga que su navegador hable a través de la API de síntesis de voz

Los dispositivos de navegación lo hacen desde siempre. Ahora los navegadores también están aprendiendo a hacerlo. Estoy hablando de la síntesis de voz. La nueva API de síntesis de voz de HTML5 permite que su sitio web hable o, más precisamente, lea en voz alta lo que está escrito allí utilizando una voz humana. Hay diferentes voces para diferentes idiomas, incluso varias voces por idioma. Ahora todo lo que necesita es presionar un botón y el navegador leerá el contenido de su sitio web a cualquier visitante que lo solicite. Un buen servicio para cualquier persona e inevitable incluso para los invidentes.

Muchas voces e idiomas

El número de voces e idiomas disponibles depende del navegador utilizado. Chrome admite nueve idiomas, entre ellos inglés británico y estadounidense, alemán, francés, español e italiano. El inglés británico ofrece voces masculinas y femeninas, todos los demás idiomas solo ofrecen voces femeninas. Es posible utilizar una voz en francés para leer un texto en alemán. A continuación, el texto se leerá en alemán con acento francés. Divertido, pero no muy sensato..

Reproducción sencilla

Para que un texto se lea en voz alta, primero debemos crear un nuevo «enunciado». Usando una de las propiedades „voice“ o „lang“ le decimos al navegador en qué idioma leer. Luego comenzamos la reproducción.

var worte = new SpeechSynthesisUtterance("Hello, nice to see you.");
worte.lang = "en-UK";
window.speechSynthesis.speak(worte);

El ejemplo utiliza inglés británico. Como hay diferentes idiomas para el inglés, necesitamos definir el idioma a través de «lang» para el inglés británico como «en-UK» y para el inglés americano como «en-US». Según el método „speak()“, nuestro texto de ejemplo se leerá con una voz de habla inglesa británica.

var worte = new SpeechSynthesisUtterance("Hello, nice to see you.");
var stimmen = window.speechSynthesis.getVoices();
worte.voice = stimmen[6];
window.speechSynthesis.speak(worte);

En nuestro segundo ejemplo no elegimos un idioma sino una voz directamente. Para ello llamamos a todas las voces disponibles a través de „getVoices()“. Luego, usando la propiedad „voz“, agregamos una voz al enunciado. La voz número 6 representaría la voz alemana. El resultado final de nuestros dos ejemplos es idéntico.

Solicitar Voces Disponibles

Tan pronto como usemos «getVoices()» para acceder a las voces disponibles del navegador, debemos trabajar con detectores de eventos ya que el navegador no cargará las voces junto con el documento. Eso significa que no es posible llamar a «getVoices()» directamente en la carga de la página. En su lugar, use el detector de eventos «DOMContentLoaded», que cargará una función que verificará la disponibilidad de la API de síntesis de voz a través de una consulta «si». También verificará si la API es compatible con el navegador que realiza la llamada. Luego comience la reproducción usando el evento „clic“.

window.addEventListener("DOMContentLoaded", function() {
  if (window.speechSynthesis != undefined) {
    document.getElementById("playback").addEventListener("click", function() {
      var stimmen = window.speechSynthesis.getVoices();
      for(var i = 0; i < stimmen.length; i++ ) {
        console.log("Voice " + i.toString() + " " + stimmen[i].name);
      }
    }, false)
  }
}, false)

Este ejemplo inicia una función que escribirá todas las voces con sus números y nombres internos en la consola tan pronto como se haga clic en el elemento con el ID «reproducción».

Controlar el tono y la velocidad de la voz

Además del conjunto de voces dedicadas para idiomas dedicados, encontrará una voz genérica (la número 10) que está diseñada para funcionar en todos los idiomas. Como puede imaginar fácilmente, esta voz necesita una pequeña configuración para funcionar bien con su idioma deseado. Es bueno saber que puede ajustar la frecuencia de la voz y la velocidad del habla.

var worte = new SpeechSynthesisUtterance("Let us talk faster and in a higher voice.");
var stimmen = window.speechSynthesis.getVoices();
worte.voice = stimmen[10];
worte.pitch = 4;
worte.rate = 10;
window.speechSynthesis.speak(worte);

Usando „pitch“ controlamos la frecuencia de la voz. Se permiten valores de 0 a 2, donde 1 define la frecuencia predeterminada de una voz normal. Por debajo de 1, la voz se oscurecerá, mientras que los valores superiores a 1 la intensifican. Use „tasa“ para controlar la velocidad de habla. Los valores pueden oscilar entre 0,1 y 10, donde 1 representa la velocidad de habla normal. Los valores por debajo de 1 conducen a tasas más lentas, los valores por encima de 1 a tasas más rápidas. La desventaja de la voz genérica es que suena mucho más sintética que sus contrapartes dedicadas. Estos ofrecen una impresión de sonido mucho más natural.

Control del habla en general

Usando el método „hablar()“ comenzamos la reproducción, mientras que „pausa()“ – bueno – la pausa. Usando „resume()“, bueno, reanudamos desde donde hicimos una pausa.

document.getElementById("pause").addEventListener("click", function() {
  window.speechSynthesis.pause();
}, false);

Use „volumen“ para controlar el volumen de la reproducción. Los valores deben oscilar entre 0 y 1. Varios detectores de eventos le permiten vincular funciones a diferentes estados de reproducción, por ejemplo, al principio o al final.

worte.addEventListener("start", function() {
  document.title = "Now listen …";
}, false);

worte.addEventListener("end", function() {
  document.title = "… that was it.";
}, false);

Si inicia más de una reproducción simultáneamente o una mientras otra solo se está ejecutando, las reproducciones individuales se ejecutarán en una cola una tras otra. La propiedad „pendiente“ le dice si hay instancias de „speechSynthesis“ en cola. El valor será «verdadero» o «falso». Con «hablar» puede comprobar si se está ejecutando una reproducción.

Compatibilidad con navegador

Ya lo adivinaste. El soporte del navegador no está muy extendido. Solo Chrome a partir de la versión 25, Safari a partir de la 6.1 y Mobile Safari a partir de iOS7 son compatibles con la nueva API.

(dpe)