Cómo agregar una característica de texto a voz en cualquier página web

La función de texto a voz se refiere a la narración oral de un texto que se muestra en un dispositivo. En la actualidad, dispositivos tales como computadoras portátiles, tabletas y teléfonos móviles ya tienen esta característica . Cualquier aplicación que se ejecute en estos dispositivos, como un navegador web, puede hacer uso de ella y ampliar su funcionalidad . La función de narración puede ser una ayuda adecuada para una aplicación que muestra abundante texto, ya que ofrece la opción de escuchar a los visitantes del sitio web.

La API de Web Speech

La API de Web Speech JavaScript es la puerta de enlace para acceder a la función Text-to-Speech mediante un navegador web . Por lo tanto, si desea introducir la funcionalidad de conversión de texto a voz en una página web de texto pesado 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 comenzar, creemos una página web con el texto de muestra para ser narrado y tres botones .

 La liebre con muchos amigos 
Una liebre era muy popular con ...
Pero se negó, afirmando que ...
 Moraleja de la historia... 

Los botones serán los controles para la narración . Ahora debemos asegurarnos de que el UA sea compatible con la interfaz SpeechSynthesis . Para hacerlo, verificamos rápidamente con JavaScript si el objeto window tiene la propiedad 'speechSynthesis' o no.

 onload = function () {if ('speechSynthesis' en la ventana) {/ * síntesis de voz soportada * /} else {/ * síntesis de voz no admitida * /}} 

Si speechSynthesis está disponible, primero creamos una referencia para speechSynthesis que asignamos a la variable synth . También iniciamos una bandera con el valor false (veremos su propósito más adelante en la publicación), y creamos referencias y hacemos clic en los manejadores de eventos para los tres botones (Reproducir, Pausa, Detener) también.

Cuando el usuario hace clic en uno de los botones, se onClickPlay() su función respectiva ( onClickPlay(), onClickPause(), onClickStop() ).

 if ('speechSynthesis' en la ventana) {var synth = speechSynthesis; var flag = falso; / * referencias a los botones * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pausa'); var stopEle = document.querySelector ('# stop'); / * haga clic en controladores de eventos para los botones * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); función onClickPlay () {} función onClickPause () {} función onClickStop () {}} 

Crea las funciones personalizadas

Ahora construyamos las funciones de clic de los tres botones individuales que serán llamados por los manejadores de eventos.

1. Jugar / Reanudar

Cuando se hace clic en el botón Reproducir, primero revisamos la flag . Si es false, lo configuramos en true, de modo que si en algún momento se hace clic en el botón más adelante, el código dentro de la primera condición if no se ejecutará (no hasta que la bandera sea false nuevamente).

Luego creamos una nueva instancia de la interfaz SpeechSynthesisUtterance que contiene información sobre el habla, como, el texto que se va a leer, el volumen del habla, 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 utterance .

 función onClickPlay () {if (! flag) {flag = true; expresión = nueva SpeechSynthesisUtterance (document.querySelector ('artículo'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () {flag = false; }; synth.speak (expresión); } if (synth.paused) {/ * unpause / resume narration * / synth.resume (); }} 

Utilizamos el método SpeechSynthesis.getVoices() para designar una voz para el habla 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 mediante el uso de utterance.voice = synth.getVoices()[0]; declaración.

La propiedad onend representa un controlador de eventos que se ejecuta cuando se termina el discurso . Dentro de él, cambiamos el valor de la variable de marcador a falso para que el código que inicia el discurso se pueda ejecutar cuando se haga clic de nuevo en el botón.

Luego llamamos al método SpeechSynthesis.speak() para comenzar la narración . También debemos verificar si la narración está pausada, para lo cual usamos la propiedad SpeechSynthesis.paused solo SpeechSynthesis.paused . Si la narración está en pausa, debemos reanudar la narración con el clic del botón, que podemos lograr utilizando el método SpeechSynthesis.resume() .

2. Pausa

Ahora crearemos la función onClickPause() en la que primero verificamos si la narración está en curso y no en pausa . Podemos probar estas condiciones haciendo uso de las SpeechSynthesis.speaking y SpeechSynthesis.paused . Si ambas condiciones son verdaderas, nuestra función onClickPause() pausa el discurso llamando al método SpeechSynthesis.pause() .

 function onClickPause () {if (synth.speaking &&! synth.paused) {/ * pause narration * / synth.pause (); }} 

3. Parar

La función onClickStop() está construida de forma similar a onClickPause() . Si el discurso está en curso, lo paramos llamando al método SpeechSynthesis.cancel() que elimina todos los enunciados .

 función onClickStop () {if (synth.speaking) {/ * stop narration * / / * para safari * / flag = false; synth.cancel (); }} 

Tenga en cuenta que en la cancelación de la palabra, el evento onend se dispara automáticamente, y ya habíamos agregado el código de reinicio del onend dentro de él. Sin embargo, hay un error en el navegador Safari que impide que este evento se active, es por eso que reiniciamos el indicador en la función onClickStop() . No tienes que hacerlo si no quieres admitir Safari.

Soporte del navegador

Todas las versiones más recientes de navegadores modernos tienen soporte total o parcial para la API de síntesis de voz. Los exploradores de Webkit no reproducen el habla de varias pestañas, la pausa tiene errores (funciona pero con errores) y el habla no se restablece cuando el usuario recarga la página en los navegadores Webkit.

Demostración de trabajo

Eche un vistazo a la demostración en vivo a continuación o revise el código completo en Github.

Ver el Pen à° à ... ¸à ¢ Â?  'Ã,  £ Texto a voz - JavaScript por HONGKIAT (@hkdc) en CodePen.

Una introducción al diseño atómico para diseñadores web

La modularidad, la reutilización y la escalabilidad no son solo conceptos de codificación, sino que también puede utilizarlos para crear sistemas de diseño mejor optimizados . El diseño atómico es una nueva metodología para construir UI efectivas de abajo hacia arriba, utilizando una analogía química .En lugar

(Consejos de tecnología y diseño)

10 videos imperdibles de TED para diseñadores

TED (Tecnología, Entretenimiento, Diseño) existe desde 1984 con el objetivo principal de difundir algunas ideas y experiencias realmente buenas relacionadas con la tecnología, el entretenimiento y el diseño. Puede que no esté familiarizado con esta conferencia, pero en serio, los dispositivos tecnológicos geniales como Xbox Kinect están inspirados en una de las charlas de TED.Por su

(Consejos de tecnología y diseño)