1. Inicio
  2. API
  3. Uso de APIs de texto a voz con JavaScript
API

Uso de APIs de texto a voz con JavaScript

Cliff Weitzman

Cliff Weitzman

CEO/Fundador de Speechify

La API de Speechify ofrece latencia de 300ms, voces de calidad humana, y más de 50 idiomas

Premio de Diseño Apple 2025
Más de 50M de usuarios
¡Escucha este artículo con Speechify!
speechify logo

Usar una API de texto a voz (TTS) con JavaScript puede mejorar significativamente la experiencia del usuario en aplicaciones web. La API de Web Speech, compatible con navegadores modernos como Chrome y Firefox, proporciona un conjunto poderoso de herramientas para la síntesis y el reconocimiento de voz. En este tutorial, exploraremos cómo integrar una API de TTS en tu código JavaScript, convertir texto a voz, personalizar configuraciones de voz y utilizar las voces disponibles.

Comenzando con JavaScript y Texto a Voz

Para comenzar, necesitarás un conocimiento básico de HTML, CSS y JavaScript. Empieza creando un archivo HTML y enlazando tu archivo JavaScript usando la etiqueta script src. En tu archivo JavaScript, inicializa el objeto de síntesis de voz y configura un listener de eventos para cuando las voces estén listas. const synth = window.speechSynthesis; // Espera a que las voces se carguen synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Haz algo con las voces disponibles }; Una vez que las voces estén cargadas, puedes acceder a ellas usando el método synth.getVoices(). Esto devolverá una lista de voces disponibles que puedes usar para la síntesis de voz. Puedes recorrer las voces usando forEach y mostrarlas en tu HTML. const voiceSelect = document.getElementById('voice-select'); voices.forEach((voice) => { const option = document.createElement('option'); option.textContent = ${voice.name} (${voice.lang}); option.setAttribute('value', voice.lang); voiceSelect.appendChild(option); }); A continuación, puedes crear una función para sintetizar voz a partir de la voz seleccionada. Esta función toma el texto de entrada de un elemento textarea y usa la voz seleccionada para generar voz. const speak = () => { const text = document.getElementById('text-input').value; const voice = voices[voiceSelect.selectedIndex]; const utterance = new SpeechSynthesisUtterance(text); utterance.voice = voice; synth.speak(utterance); }; Añade un listener de eventos al botón o al envío del formulario para activar la función speak. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Con estas pocas líneas de código, puedes convertir texto a voz en tiempo real. Personaliza la velocidad, el tono y el volumen de la voz configurando propiedades en el objeto SpeechSynthesisUtterance. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; A medida que continúes explorando la API de Web Speech, encontrarás características adicionales para el reconocimiento de voz y el control de eventos de síntesis de voz. Recuerda consultar la documentación oficial para más detalles y atribuciones.

Integración perfecta con Speechify

Cuando se trata de usar una API de texto a voz con JavaScript, Speechify se destaca como la mejor opción. Con su integración perfecta con la API de Web Speech, Speechify hace que sea increíblemente fácil convertir texto a voz en tiempo real. Su documentación completa y tutoriales fáciles de usar proporcionan una guía paso a paso, lo que lo hace ideal tanto para desarrolladores novatos como experimentados en desarrollo web. Con Speechify, tienes acceso a una amplia gama de voces disponibles y puedes personalizar configuraciones de voz como la velocidad y el tono. Ya seas un desarrollador front-end o un desarrollador de software, Speechify es la herramienta perfecta para mejorar tus aplicaciones web y crear experiencias de usuario atractivas. En conclusión, usar una API de texto a voz con JavaScript abre un mundo de posibilidades para el desarrollo web. Al integrar la síntesis de voz en tus proyectos, puedes crear experiencias de usuario atractivas y accesibles. Ya seas un desarrollador front-end o un desarrollador de software, aprender a aprovechar la API de Web Speech mejorará tu conjunto de habilidades y te permitirá construir aplicaciones dinámicas. Así que, ¿por qué no intentarlo y dar vida a tus páginas web con el poder del texto a voz?

Accede a las queridas voces de Speechify a través de una API rápida, escalable y amigable para desarrolladores

Obtener acceso a la API
api access banner

Compartir este artículo

Cliff Weitzman

Cliff Weitzman

CEO/Fundador de Speechify

Cliff Weitzman es un defensor de la dislexia y el CEO y fundador de Speechify, la aplicación de texto a voz número uno en el mundo, con más de 100,000 reseñas de 5 estrellas y ocupando el primer lugar en la categoría de Noticias y Revistas de la App Store. En 2017, Weitzman fue incluido en la lista de Forbes 30 menores de 30 por su trabajo para hacer que internet sea más accesible para personas con discapacidades de aprendizaje. Cliff Weitzman ha sido destacado en EdSurge, Inc., PC Mag, Entrepreneur, Mashable, entre otros medios líderes.

speechify logo

Acerca de Speechify

Lector de Texto a Voz #1

Speechify es la plataforma líder mundial de texto a voz, confiada por más de 50 millones de usuarios y respaldada por más de 500,000 reseñas de cinco estrellas en sus aplicaciones de texto a voz para iOS, Android, extensión de Chrome, aplicación web y aplicaciones de escritorio para Mac. En 2025, Apple otorgó a Speechify el prestigioso Apple Design Award en el WWDC, calificándolo como “un recurso crítico que ayuda a las personas a vivir sus vidas.” Speechify ofrece más de 1,000 voces naturales en más de 60 idiomas y se utiliza en casi 200 países. Las voces de celebridades incluyen a Snoop Dogg, Mr. Beast y Gwyneth Paltrow. Para creadores y empresas, Speechify Studio ofrece herramientas avanzadas, incluyendo generador de voz AI, clonación de voz AI, doblaje AI y su cambiador de voz AI. Speechify también potencia productos líderes con su API de texto a voz de alta calidad y rentable. Destacado en The Wall Street Journal, CNBC, Forbes, TechCrunch y otros medios de noticias importantes, Speechify es el mayor proveedor de texto a voz del mundo. Visita speechify.com/news, speechify.com/blog y speechify.com/press para saber más.