Convertidor de Voz a Texto en Javascript

Esta sistema Convertidor de Voz a Texto en Javascript permite capturar y pasar a texto fácilmente, el texto capturado es fácil de copiar a través del botón de Copiar Texto y luego se puede pegar donde lo necesites.

Esta aplicación es sencilla, apenas consta de un documento HTML, otro archivo Javascript donde recae la lógica del sistema y un documento CSS que gestiona la apariencia de la aplicación.

El sistema es una aplicación que no requiere tecnologías del lado del backend y por este motivo el demo se encuentra publicado en GitHub Pages.

Previamente publiqué una aplicación que interactua de Texto a Voz, si te interesa el proceso puedes acceder al siguiente enlace:

Convertidor de texto a voz PHP usando la API de voz de Microsoft

Demo del Sistema Convertidor de Voz a Texto en Javascript

En el siguiente enlace puedes probar el funcionamiento de la aplicación:

https://configuroweb.github.io/voz-texto/index.html

Esta aplicación es plenamente gratuita y la puedes descargar y reutilizar libremente como las aplicaciones de mi apartado Gratis donde tengo más de 80 aplicaciones que te podrían servir.

Explicación del funcionamiento del Convertidor de Voz a Texto

Esta aplicación consta solo de tres archivos, no consume ningún servicio adicional, así que no requiere de ninguna interacción por API Key externas, si se comunica por API pero específicamente con el navegador y solo necesita para su funcionamiento que se le den permisos de grabación de voz la primera vez.

Obtención de Referencias a Elementos del DOM

Al inicio del archivo, se obtienen referencias a varios elementos de la interfaz de usuario mediante sus IDs:

• botonInicio: Referencia al botón utilizado para iniciar el reconocimiento de voz.
• salida: Referencia al elemento donde se mostrará el texto resultante del reconocimiento de voz.
• botonCopiar: Referencia al botón que permite copiar al portapapeles el texto mostrado en el elemento salida.
• botonLimpiar: Referencia al botón que limpia el texto mostrado en el elemento salida.

Funcionalidad de Copiar al Portapapeles

El botón botonCopiar está configurado para copiar el texto presente en el elemento salida al portapapeles del usuario cuando se hace clic en él. Utiliza la API navigator.clipboard.writeText para realizar la copia. Si la operación es exitosa, muestra una alerta indicando "Texto copiado al portapapeles!". Si hay un error, se muestra en la consola del navegador.

Funcionalidad de Limpiar Texto

El botón botonLimpiar permite al usuario borrar el contenido del elemento salida al hacer clic en él, simplemente estableciendo su texto interno ( innerText) a una cadena vacía.

Funcionalidad de Reconocimiento de Voz

El botón botonInicio inicia el reconocimiento de voz cuando se hace clic en él. El script verifica primero la disponibilidad de la API SpeechRecognition en el navegador del usuario, considerando tanto la versión con prefijo ( webkitSpeechRecognition) como la estándar.

Al activar el reconocimiento de voz, se configura para recibir resultados intermedios, lo que significa que el texto se actualiza a medida que el usuario habla, antes de que se complete una frase o comando completo.

Cuando se captura un evento de resultado ( result), el script combina los fragmentos de texto reconocidos en una única cadena y actualiza el contenido del elemento salida con este texto. También se muestra en la consola para depuración.

El reconocimiento de voz se inicia llamando a reconocimiento.start(), pero solo si la variable speech es true, lo cual siempre es cierto según el script proporcionado.

Archivo script.js

A continuación se muestra el archivo script.js:

// Obtener referencias a elementos de la UI mediante sus IDs actualizados. const botonInicio = document.getElementById('botonInicio'); const salida = document.getElementById('salida'); const botonCopiar = document.getElementById('botonCopiar'); const botonLimpiar = document.getElementById('botonLimpiar'); // Funcionalidad del botón de copiar: copia el texto del elemento de salida al portapapeles. botonCopiar.onclick = function() { // Extrae el texto a copiar del elemento 'salida'. const textoParaCopiar = salida.innerText; // Intenta copiar el texto al portapapeles. navigator.clipboard.writeText(textoParaCopiar).then(() => { // Si la operación es exitosa, muestra una alerta al usuario. alert('Texto copiado al portapapeles!'); }).catch(err => { // Si ocurre un error, lo muestra en la consola. console.error('Error al copiar: ', err); }); }; // Funcionalidad del botón de limpiar: limpia el texto del elemento de salida. botonLimpiar.onclick = function() { // Limpia el contenido del elemento 'salida'. salida.innerText = ''; }; // Funcionalidad del botón de inicio: inicia el reconocimiento de voz. botonInicio.addEventListener('click', function() { // Indicador para controlar el inicio del reconocimiento de voz. var speech = true; // Compatibilidad con prefijo webkit para navegadores que lo requieran. window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; // Crear una instancia de SpeechRecognition. const reconocimiento = new SpeechRecognition(); // Configurar para obtener resultados intermedios (no finales). reconocimiento.interimResults = true; // Manejar el evento 'result' para procesar los resultados del reconocimiento. reconocimiento.addEventListener('result', e => { // Convertir los resultados del evento en un solo string de texto. const transcripcion = Array.from(e.results) .map(resultado => resultado[0]) .map(resultado => resultado.transcript) .join(''); // Actualizar el elemento 'salida' con el texto transcrito. salida.innerHTML = transcripcion; // Opcional: Mostrar el texto transcrito en la consola para depuración. console.log(transcripcion); }); // Iniciar el reconocimiento de voz si la variable 'speech' es true. if (speech === true) { reconocimiento.start(); } });

Archivo style.css

A continuación se muestra el archivo style.css con el que se gestiona la apariencia de la aplicación:

/* Importa la fuente Poppins desde Google Fonts para usarla en todo el sitio */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); /* Establece estilos base para todos los elementos */ * { margin: 0; /* Elimina los márgenes por defecto */ padding: 0; /* Elimina el relleno por defecto */ box-sizing: border-box; /* Cambia el modelo de caja para incluir padding y border en el ancho y alto del elemento */ font-family: 'Poppins', sans-serif; /* Establece Poppins como la fuente predeterminada */ } /* Estilos específicos para el <body> */ body { background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); /* Fondo con gradiente lineal */ background-size: cover; /* Asegura que el fondo cubra todo el espacio disponible */ background-attachment: fixed; /* El fondo no se mueve al hacer scroll */ background-repeat: no-repeat; /* Evita que el fondo se repita */ padding: 20px; /* Añade relleno alrededor de los contenidos del cuerpo */ } /* Estilos para el contenedor principal */ .container { max-width: 800px; /* Ancho máximo del contenedor */ margin: auto; /* Centra el contenedor horizontalmente */ background-color: rgba(255, 255, 255, 0.8); /* Color de fondo con opacidad */ border-radius: 10px; /* Bordes redondeados */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave alrededor del contenedor */ padding: 20px; /* Relleno dentro del contenedor */ text-align: center; /* Alinea el texto al centro */ } /* Estilos para el botón principal */ .button { margin: 20px 0; /* Añade margen arriba y abajo del botón */ } /* Estilos para el grupo de botones */ .buttons { display: flex; /* Utiliza Flexbox para la disposición */ justify-content: center; /* Centra los botones horizontalmente */ gap: 10px; /* Añade espacio entre los botones */ margin-top: 20px; /* Añade margen arriba del grupo de botones */ } /* Estilos aplicados a todos los <button> */ button { border: none; /* Elimina el borde por defecto */ padding: 10px 20px; /* Añade relleno alrededor del texto dentro del botón */ border-radius: 5px; /* Bordes redondeados para el botón */ cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */ font-weight: bold; /* Texto en negrita */ } /* Estilos para el botón de copiar */ #botonCopiar { background-color: #4CAF50; /* Color de fondo verde */ color: white; /* Texto en color blanco */ } /* Estilos para el botón de limpiar */ #botonLimpiar { background-color: #f44336; /* Color de fondo rojo */ color: white; /* Texto en color blanco */ } /* Estilos para el estado hover de todos los botones */ button:hover { opacity: 0.8; /* Reduce la opacidad al pasar el mouse por encima */ } /* Estilos para el área de salida */ #salida { margin-top: 20px; /* Añade margen arriba del área de salida */ border: 1px solid #ccc; /* Borde sólido ligero */ padding: 10px; /* Relleno dentro del área de salida */ min-height: 100px; /* Altura mínima */ background-color: #f9f9f9; /* Color de fondo claro */ overflow-wrap: break-word; /* Asegura que el texto largo se rompa y no desborde el contenedor */ } .footer-container { width: 100%; /* Asegura que el footer ocupe todo el ancho */ max-width: none; /* Anula el máximo de ancho establecido por .container */ background-color: #2c3e50; /* O cualquier otro color que prefieras */ color: #fff; /* Texto blanco para contraste */ box-shadow: none; /* Opcional: elimina la sombra si no la deseas */ border-radius: 0; /* Opcional: elimina los bordes redondeados */ } /* Vista para ordenadores */ @media (min-width: 992px) { .footer-container { width: calc(100% - 40px); margin: auto; max-width: 800px; } .container-fluid { max-width: 800px; /* Asegura que el ancho máximo sea el mismo que el de .container */ margin-left: auto; margin-right: 0; width: auto; } }

Archivo index.html

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Conversor de Voz a Texto</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"> <link rel="shortcut icon" href="./faviconconfiguroweb.png" type="image/x-icon"> <link rel="stylesheet" href="./style.css"> </head> <body> <nav class="container-fluid"> <ul> <li><a href="https://www.youtube.com/channel/UCVnrMbml3wUIuwz-oSaIUnA">Youtube</a></li> <li><a href="https://github.com/configuroweb">GitHub</a></li> <li><a href="https://www.configuroweb.com/desarrollo/" role="button">ConfiguroWeb</a></li> </ul> </nav> <main class="container"> <div class="grid"> <section> <hgroup> <h2>Convierte tu voz en texto fácilmente</h2> <h3>Simple, rápido y efectivo</h3> </hgroup> <div class="button"> <button id="botonInicio"><img src="https://cdn-icons-png.flaticon.com/512/25/25682.png" alt="Iniciar grabación" width="50" height="50"></button> <small>Toca para Grabar</small> </div> <div id="salida"></div> <div class="buttons"> <button id="botonCopiar">Copiar Texto</button> <button id="botonLimpiar">Limpiar Texto</button> </div> </section> </div> </main> <footer class="container footer-container"> <small> Esta aplicación es uno de mis más de 150 códigos que tengo publicados en mi blog <a href="https://www.configuroweb.com/desarrollo/" target="_blank">configuroweb.com</a> </small> </footer> <script src="./script.js"></script> </body> </html>

Repositorio Convertidor de Voz a Texto en Javascript

A continuación te comparto el código plenamente que puedes utilizar libremente desde mi GitHub

Como siempre te recomiento te pegues una pasada por el blog, te garantizo que te gustará y cualquier duda quedo al pendiente, me puedes contactar a mi Whatsapp en el siguiente enlace:

https://configuroweb.com/WhatsappMessenger