|

Convierta texto a voz usando Web Speech API en JavaScript

Los datos de voz se incorporan a las aplicaciones en línea utilizando Web Speech API . En este artículo, crearemos una página web simple que implemente la conversión de texto a voz mediante Web Speech API

Por el bien de esta demostración, creemos un nuevo directorio y creemos dos nuevos archivos: index.htmlytext-to-speech.js

El archivo HTML

En el archivo HTML, configuremos los siguientes elementos:

  • Un selectmenú sin opciones. selectUsando JavaScript, llenaremos el menú vacío con una lista de posibles voces
  • Controles deslizantes de rango para volumen, tono y velocidad
  • textareapara escribir
  • Botones de control para el discurso

En esta demostración, usaremos Bootstrap 5 para el estilo. Aquí hay algo de código:

Así es como se verá en el navegador:

El archivo JavaScript

En el archivo JavaScript, vamos a utilizar principalmente tres interfaces: SpeechSynthesiswindow.speechSynthesisSpeechSynthesisUtterance. Entonces, entendámoslos brevemente.

Interfaz JavaScript

Esta es la interfaz principal para el servicio de síntesis de voz, que controla la síntesis o producción de voz basada en la entrada de texto. Esta interfaz se utiliza para iniciar, detener, pausar y reiniciar el habla, así como para acceder a las voces admitidas por el dispositivo.

Los métodos proporcionados en esta interfaz son los siguientes:

  • speak(): Para agregar el enunciado (objeto de SpeechSynthesisUtterance) en la cola, que se pronunciará cuando no haya ningún enunciado pendiente antes, esta es la función que usaremos para
  • pause(): Para pausar el discurso actual en curso
  • resume(): para reanudar el discurso en pausa
  • cancel(): Para cancelar todos los enunciados pendientes o el discurso creado, que aún no se reproducen
  • getVoices(): para obtener la lista de todas las voces admitidas que admite el dispositivo

Propiedad JavaScript

window.speechSynthesis

El speak()método se llama en la interfaz del controlador de síntesis de voz, a la que hace referencia esta propiedad del windowobjeto JavaScript.

Entenderemos esto más cuando saltemos al código.

Hola, 👋 encantados de conocerte.

Regístrate para recibir contenido interesante en tu bandeja de entrada, cada mes.

¡No hacemos spam! Lee nuestra [link]política de privacidad[/link] para obtener más información.

Publicaciones Similares