Texto a Voz con HTML y Javascript

Este artículo explora un ejemplo de código HTML5 y Javascript que transforma texto a voz sin la ayuda de la inteligencia artificial (IA). El objetivo es proponer una reflexión sobre cómo, en muchas situaciones, la simplicidad puede superar a la sofisticación de la IA.

Puedes ver el resultado de texto a voz en esta página.

Un Script de Texto a Voz

En este script aprovechamos funcionalidades incorporadas en los navegadores modernos que pueden ser utilizadas para realizar tareas complejas de manera simple y eficiente.

Exploración del Código

Empleamos la función convertirTextoAVoz(). Esta función se activa al pulsar un botón en una interfaz web y utiliza la API de síntesis de voz del navegador para leer en voz alta el texto introducido por el usuario.

Aspectos Clave del Código:

Interfaz de Usuario:

Se crea una interfaz básica utilizando HTML y Tailwind CSS para el estilo. Esto incluye un área de texto y un botón para activar la conversión.

Captura y Manejo del Texto:

JavaScript se encarga de capturar el texto del área de texto y prepararlo para la conversión.

Configuración de la Síntesis de Voz:

La API SpeechSynthesisUtterance del navegador se configura para determinar cómo se leerá el texto. Esto incluye la selección del idioma, el volumen, la velocidad y el tono de la voz.

Compatibilidad de SpeechSynthesisUtterance en navegadores

Personalización de la Voz:

Aunque el navegador proporciona varias opciones de voz, este script selecciona específicamente "Google español" para mejorar la experiencia del usuario, dado que en mi opinión es la que tiene mejor pronunciación en idioma español.

Replicando y Experimentando con el Código

Les comparto el código para replicar y experimentar con este script de texto a voz como una excelente manera de aprender y apreciar la simplicidad de esta solución que pasa desapercibida con el ingreso de la IA. A continuación, te guiaré paso a paso a través del proceso para que puedas probar este código.

Paso 1: Preparación del Entorno

Primero, necesitas un entorno para ejecutar el código. Esto puede ser un editor de texto (como Notepad o Visual Studio Code) y un navegador web (como Chrome, Firefox o Edge).

Paso 2: Crear el Archivo HTML

Crea un nuevo archivo en tu editor de texto y guárdalo con la extensión .html. Por ejemplo, puedes nombrarlo textoavoz.html.

Paso 3: Escribir el Código

Ahora, copia el siguiente código en tu archivo HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Texto a Voz</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">Texto a Voz</h1>
        <textarea id="text" rows="4" cols="50" class="w-full p-2 border border-gray-300 rounded mb-4"></textarea>
        <br>
        <button onclick="convertirTextoAVoz()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Convertir</button>
    </div>

    <script>
        function convertirTextoAVoz() {
            var texto = document.getElementById("text").value;
            var speech = new SpeechSynthesisUtterance();
            speech.text = texto;
            speech.lang = "es-ES";
            speech.volume = 1;
            speech.rate = 1;
            speech.pitch = 1;
            
            // Set the voice to Google in Spanish
            var voices = window.speechSynthesis.getVoices();
            var googleVoice = voices.find(function(voice) {
                return voice.name === 'Google español';
            });
            speech.voice = googleVoice;

            window.speechSynthesis.speak(speech);
        }
    </script>
</body>
</html>

Este código crea una página web simple con un área de texto y un botón. Al hacer clic en el botón, se activa la función convertirTextoAVoz().

Paso 4: Experimentar con el Código

Una vez que hayas guardado tu archivo, ábrelo con tu navegador web. Escribe algo en el área de texto y haz clic en el botón "Convertir". Escucharás el texto leído en voz alta. Puedes experimentar cambiando el texto, ajustando el idioma (modificando el valor de speech.lang), o incluso probando diferentes voces disponibles en tu navegador.

Paso 5: Aprendizaje

Una solución sencilla puede ser funcional y útil. La intención de este este ejercicio es que experimentes y puedas integrar estas características en tus proyectos.

*Agregué Tailwind, al código para darle un diseño agradable.

Buscar este blog

Apuntes de Tecnología