Cómo agregar una función de texto a voz en cualquier página web

los texto a voz característica se refiere a la narración hablada de un texto se muestra en un dispositivo. En la actualidad, dispositivos como computadoras portátiles, tabletas y teléfonos móviles ya tiene 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, como lo ofrece la opción de escuchar a los visitantes del sitio web.

La API de Web Speech

los Web Speech JavaScript API es la puerta de entrada a acceder a la función de texto a voz 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 hacer uso de esta API práctica o, para ser más específico, su Síntesis del habla interfaz.

Código inicial y verificación de soporte

Para empezar, vamos a crear una página web con me muestra texto para ser narrado, y tres botones.

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

Los botones serán los Controles para la narración.. Ahora necesitamos asegurarnos de que UA apoya el Síntesis del habla interfaz. Para ello, comprobamos rápidamente con JavaScript si el ventana objeto tiene el 'Síntesis del habla' propiedad, o no.

 onload = function () if ('speechSynthesis' en la ventana) / * se admite la síntesis de voz * / else / * no se admite la síntesis de voz * /

Si Síntesis del habla está disponible, primero nosotros crear una referencia para Síntesis del habla que asignamos a la sintetizador variable. Nosotros también iniciar una bandera con el falso valor (veremos su propósito más adelante en la publicación), y nosotros crear referencias y hacer clic en los controladores de eventos para los tres botones (Reproducir, Pausa, Detener) también.

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

 if ('speechSynthesis' in window) var synth = speechSynthesis; var flag = falso; / * referencias a los botones * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * haga clic en los controladores de eventos para los botones * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('clic', onClickStop); function onClickPlay ()  function onClickPause ()  function onClickStop ()

Crea las funciones personalizadas.

Ahora vamos a construir 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 comprobar el bandera. Si es falso, lo configuramos para cierto, así que si alguna vez se hace clic en el botón más tarde, el código dentro de la primero Si la condición no se ejecutará (no hasta que la bandera esté falso otra vez).

Entonces nosotros crear una nueva instancia de la DiscursoSíntesisUtilidad interfaz que contiene información sobre el habla, como el texto a leer, el volumen de la voz, la voz hablada, la velocidad, el tono y el idioma de la voz. Añadimos el texto del artículo. como parametro del constructor, y asignarlo a la declaración variable.

 funcion onClickPlay () if (! flag) flag = true; expresión = new SpeechSynthesisUtterance (document.querySelector ('article'). textContent); emite una voz = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (expresión);  if (synth.paused) / * reanudar / reanudar narración * / synth.resume ();

Usamos el SpeechSynthesis.getVoices () método 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, Asignar el primer dispositivo de voz disponible. usando el emite una voz = synth.getVoices () [0]; declaración.

los en marcha propiedad representa un controlador de eventos que es ejecutado cuando el discurso termina. Dentro de ella, cambiamos el valor de la bandera variable volver a falso Para que el código que comienza el discurso. puede ser ejecutado cuando el botón es volvió a hacer clic.

Entonces llamamos al SpeechSynthesis.speak () método para comienza la narración. También tenemos que comprobar si la narración es pausada, para lo cual usamos el de solo lectura SpeechSynthesis.paused propiedad. Si la narración es pausada, necesitamos reanudar la narración en el clic del botón, que podemos lograr usando el SpeechSynthesis.resume () método.

2. Pausa

Ahora vamos a crear el onClickPause () Función en la que primero comprobamos Si la narración es continua y no se detiene.. Podemos probar estas condiciones haciendo uso de la SpeechSynthesis.speaking y el SpeechSynthesis.paused propiedades Si ambas condiciones son ciertas, nuestro onClickPause () función pausa el discurso llamando al SpeechSynthesis.pause () método.

 función onClickPause () if (synth.speaking &&! synth.paused) / * pause narration * / synth.pause ();

3. detener

los onClickStop () la función es construido de manera similar a onClickPause (). Si el discurso es continuo, nosotros para llamando al SpeechSynthesis.cancel () método que elimina todas las expresiones.

 funciona onClickStop () if (synth.speaking) / * stop narration * / / * para safari * / flag = false; synth.cancel ();

Tenga en cuenta que en la cancelación de discurso, el en marcha evento se dispara automáticamente, y ya habíamos agregado el código de reinicio de 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 el onClickStop () función. No tienes que hacerlo si no quieres ser compatible con Safari..

Soporte del navegador

Todas las últimas versiones de navegadores modernos tener soporte total o parcial Para la API de síntesis de voz. Los navegadores Webkit no reproducen el habla desde varias pestañas, la pausa está defectuosa (funciona pero está defectuosa) y la voz no se restablece cuando el usuario vuelve a cargar la página en los navegadores Webkit.

Demo de trabajo

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

Ver la pluma Ã ?? Â ° Ã… Â¸UNA¢??? ?? ??? £ Text to Speech - JavaScript de HONGKIAT (@hkdc) en CodePen.