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
- A
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: SpeechSynthesis, window.speechSynthesisy SpeechSynthesisUtterance. Entonces, entendámoslos brevemente.
Interfaz JavaScript
Los métodos proporcionados en esta interfaz son los siguientes:
speak(): Para agregar el enunciado (objeto deSpeechSynthesisUtterance) en la cola, que se pronunciará cuando no haya ningún enunciado pendiente antes, esta es la función que usaremos parapause(): Para pausar el discurso actual en cursoresume(): para reanudar el discurso en pausacancel(): Para cancelar todos los enunciados pendientes o el discurso creado, que aún no se reproducengetVoices(): 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.
