La función de texto a voz se refiere a la narración hablada de un texto que se muestra en un dispositivo. En la actualidad, dispositivos como portátiles, tabletas y teléfonos móviles ya cuentan con esta función. Cualquier aplicación que se ejecute en estos dispositivos, como un navegador web, puede utilizarlo y ampliar su funcionalidad. La función de narración puede ser una ayuda adecuada para una aplicación que muestra mucho texto, ya que ofrece la opción de escuchar a los visitantes del sitio web.
La API de voz web
La API de JavaScript de Web Speech es la puerta de acceso para acceder a la función Text-to-Speech mediante un navegador web. Por lo tanto, si desea introducir la funcionalidad de texto a voz en una página web con mucho texto y permitir que sus lectores escuchen el contenido, puede utilizar esta práctica API o, para ser más específicos, su interfaz SpeechSynthesis
Código inicial y verificación de soporte
Para empezar, vamos a crear una página web conmigo texto de muestra para ser narrado y tres botones.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div> <button id=play></button> <button id=pause></button> <button id=stop></button></div><article> <h1>The Hare With Many Friends</h1> <img src=\"hare-and-friends.jpg\"> <p>A hare was very popular with...</p> <p>But he declined, stating that...</p> <!-- More text... --> <blockquote>Moral of the story...</blockquote></article> |
Los botones serán los controles de la narración. Ahora tenemos que asegurarnos de que la UA sea compatible a SpeechSynthesis interfaz. Para ello, comprobamos rápidamente con JavaScript si el window objeto tiene la propiedad \'speechSynthesis\' o no
1 2 3 4 5 6 7 8 | onload = function() { if (\'speechSynthesis\' in window) { /* speech synthesis supported */ } else { /* speech synthesis not supported */ }} |
Si SpeechSynthesis está disponible, primero creamos una referencia para SpeechSynthesis que asignamos a la variable de synth. También iniciamos una bandera con el valor falso (veremos su propósito más adelante en la publicación), y también creamos referencias y hacemos clic en controladores de eventos para los tres botones (Reproducir, Pausa, Detener).
Cuando el usuario hace clic en uno de los botones, se llamará a su función respectiva (onClickPlay(), onClickPause(), onClickStop()).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | if (\'speechSynthesis\' in window){ var synth = speechSynthesis; var flag = false; /* references to the buttons */ var playEle = document.querySelector(\'#play\'); var pauseEle = document.querySelector(\'#pause\'); var stopEle = document.querySelector(\'#stop\'); /* click event handlers for the buttons */ playEle.addEventListener(\'click\', onClickPlay); pauseEle.addEventListener(\'click\', onClickPause); stopEle.addEventListener(\'click\', onClickStop); function onClickPlay() { } function onClickPause() { } function onClickStop() { }} |
Crear las funciones personalizadas
Ahora construyamos las funciones de clic de los tres botones individuales que serán llamados por los controladores de eventos.
1. Reproducir/Reanudar
Cuando se hace clic en el botón Reproducir, primero verificamos la flag. Si es false, lo establecemos en true, por lo que si en algún momento se hace clic en el botón más tarde, el código dentro de la primera condición if no se ejecutará (no hasta que la flag sea false nuevamente).
Luego, creamos una nueva instancia de la interfaz SpeechSynthesisUtterance que contiene información sobre el discurso, como el texto que se leerá, el volumen del discurso, la voz hablada, la velocidad, el tono y el idioma del discurso. Agregamos el texto del artículo como parámetro del constructor y lo asignamos a la variable de expresión.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function onClickPlay() { if(!flag){ flag = true; utterance = new SpeechSynthesisUtterance( document.querySelector(\'article\').textContent); utterance.voice = synth.getVoices()[0]; utterance.onend = function(){ flag = false; }; synth.speak(utterance); } if(synth.paused) { /* unpause/resume narration */ synth.resume(); }} |
Usamos el método SpeechSynthesis.getVoices() para designar una voz para el discurso de las voces disponibles en el dispositivo del usuario. Como este método devuelve una matriz de todas las opciones de voz disponibles en un dispositivo, asignamos la primera voz de dispositivo disponible usando el utterance.voice = synth.getVoices()[0]; declaración.
La propiedad onend representa un controlador de eventos que se ejecuta cuando finaliza el discurso. Dentro de él, cambiamos el valor de la flag variable volver a false para que el código que inicia el discurso se puede ejecutar cuando se vuelve a hacer clic en el botón.
Entonces llamamos al método SpeechSynthesis.speak() para iniciar la narración. También tenemos que comprobar si la narración está en pausa., para lo cual usamos el de solo lectura propiedad SpeechSynthesis.paused . Si la narración está en pausa, necesitamos reanudar la narración al hacer clic en el botón, lo que podemos lograr usando el método SpeechSynthesis.resume() .
2. Pause
Ahora vamos a crear la función onClickPause() en el que primero verificamos si la narración está en curso y no está en pausa. Podemos probar estas condiciones haciendo uso de la SpeechSynthesis.speaking y las propiedades SpeechSynthesis.paused. Si ambas condiciones son verdaderas, nuestra función onClickPause() hace una pausa en el discurso llamando al método SpeechSynthesis.pause() .
1 2 3 4 5 | function onClickPause() { if(synth.speaking && !synth.paused){ /* pause narration */ synth.pause(); }} |
3. Stop
La función onClickStop() está construido de manera similar a onClickPause(). Si el discurso está en curso, lo detenemos llamando al método SpeechSynthesis.cancel() que elimina todas las expresiones.
1 2 3 4 5 6 7 | function onClickStop() { if(synth.speaking){ /* stop narration */ /* for safari */ flag = false; synth.cancel(); }} |
NTenga en cuenta que en la cancelación de la voz, el evento onend automáticamente rechazado, y ya habíamos agregado el código de reinicio de la bandera dentro de él. Sin embargo, hay un error en el navegador Safari eso evita que este evento se dispare, es por eso que reiniciamos la bandera en la función onClickStop(). No tiene que hacerlo si no desea admitir Safari.