secture & code

Cómo implementar reconocimiento de voz en tus apps web

Hoy en día vivimos en un mundo en el que prácticamente todos los dispositivos que nos rodean tienen asistentes de voz. Desde smartphones o televisores hasta incluso algunas neveras inteligentes (para ahorrarnos tener que abrir y cerrar una puerta, que la vida ya es bastante complicada).

El reconocimiento de voz está en todas partes: en Alexa o Siri, en las transcripciones de los meet de Google, en las apps para aprender idiomas, y como no, en esas llamadas a Atención al cliente en las que te das de bruces con una voz robótica que te impide, hasta que das con las respuestas correctas, llegar hasta un ser humano al que poder quejarte aunque, probablemente, para cuando ese momento llegue (si es que llega) ya hayas tirado el teléfono por la ventana.

El reconocimiento de voz es una realidad que, junto con la IA, ha cambiado radicalmente las dinámicas y relaciones del ser humano con la tecnología.

Y te estarás preguntando, ¿cómo puedo integrar esta tecnología a mis aplicaciones web?

Pues te cuento:

Web Speech API es una herramienta gratuita que está integrada en algunos navegadores (Chrome, por ejemplo). Tiene cosas muy buenas pero también tiene sus limitaciones, como veremos más adelante.

Consta de dos interfaces principales:

Speech Synthesis – convertir texto en voz.
Speech Recognition – reconocimiento de voz y audio de forma asíncrona.

Pero en este post nos centraremos en la última.

Posibles Usos de SpeechRecognition

Esta herramienta es muy útil y tiene diversas aplicaciones como, por ejemplo, poder dar la posibilidad a personas con movilidad reducida o problemas de visión de poder interactuar con tu aplicación web mediante comandos de voz, y de esta forma hacerla más accesible. También puede usarse en juegos y experiencias interactivas, y uno de sus usos más populares hoy en día, que es la integración con IA o asistentes virtuales.

¿Cómo funciona SpeechRecognition?

Hay que tener en cuenta que al utilizar el reconocimiento de voz de Web Speech API, los datos de voz se envían a un servicio en línea externo. Esto nos da acceso gratuito a motores de voz avanzados muy potentes y precisos. Sin embargo, también hay que tener en cuenta que, siendo la voz una característica tan personal y distintiva de cada persona, regalar esos datos tan alegremente puede suponer un gran problema para la privacidad de los usuarios.

Hay otras formas de realizar reconocimiento de voz de manera offline, sin enviar datos a ningún servicio externo, sin embargo para utilizar el SpeechRecognition de Web Speech API, el envío de datos es impepinable dado que el audio se procesa en la nube.

Compatibilidad con navegadores

Speech Recognition tiene soporte completo con Chrome y Edge. Safari tiene soporte parcial, y requiere añadir el prefijo webkit para que el reconocimiento de voz funcione. Firefox, por otra parte, no es compatible con el reconocimiento de voz de Web Speech API.

Browser	Soporte	Nota
🟢 Chrome	✅ Completo	Funciona sin problemas
🟢 Edge	✅ Completo	Funciona sin problemas
🟡 Safari	⚠️ Parcial	Requiere prefijo `webkit`
🔴 Firefox	❌ Limitado/Experimental	No recomendable para producción
⚫ Navegadores antiguos	❌ No soportado	No usable

Limitaciones

Requiere HTTPS en producción debido a que los navegadores modernos solo permiten acceder al micrófono desde orígenes seguros. Y resulta evidente que para acceder al reconocimiento de voz el usuario debe, antes de nada, dar permiso para que el navegador acceda al micrófono del dispositivo.
Requiere conexión a Internet. Como hemos apuntado anteriormente, la Web Speech API envía el audio a un servicio en la nube para ser procesado. Esto implica también que la experiencia de usuario cambia dependiendo de la calidad de conexión, por cosas como la latencia o la velocidad del reconocimiento. Si usas la web en modo offline, por ejemplo utilizando una PWA, la parte de reconocimiento de voz dejaría de funcionar.
La precisión del reconocimiento de voz varía dependiendo de factores como pueden ser el acento o dialecto en el que el usuario se comunica, si hay mucho ruido de fondo o la pronunciación y velocidad del habla.
Los idiomas que soporta también cambian dependiendo del navegador que se esté utilizando, dado que delega el reconocimiento de voz al motor del propio navegador. Esto significa que si usas, por ejemplo, Chrome tendrás acceso a unos 120 idiomas y variantes, mientras que si estás en Safari, tendrás acceso a unos 50 idiomas.

Demo

Para probar esta herramienta he desarrollado una sencilla aplicación web de transcripción de audio a texto con React.

El flujo de funcionamiento de esta aplicación es el siguiente:

El usuario hace click en el botón para que el browser capture el audio.
El usuario habla.
Una vez haya terminado de hablar, el usuario da nuevamente click al botón para que la aplicación deje de escuchar el audio entrante.
Queda reflejada en un párrafo de texto la transcripción del audio entrante.

Lo primero es hacer el set up de la interfaz:

ref.current = new SpeechRecognition(); //creamos la instancia de SpeechRecognition
    ref.current.continuous = true;
    ref.current.interimResults = true;
    ref.current.lang = "es-ES";

ref.current = new SpeechRecognition(); //creamos la instancia de SpeechRecognition
    ref.current.continuous = true;
    ref.current.interimResults = true;
    ref.current.lang = "es-ES";

Después, creo un botón con un toggle, de manera que la primera vez que el usuario hace click el micrófono se active, y cuando vuelve a hacer click, se desactive. Aparece el símbolo del micrófono en la pestaña del navegador cuando está escuchando.

<div>
      <button onClick={handleClick} className={styles.button}>
        {isListening ? "Stop" : "Start"}
      </button>
      <p className={styles.text}>{transcript || "Empieza a hablar..."}</p>
    </div>

<div>
      <button onClick={handleClick} className={styles.button}>
        {isListening ? "Stop" : "Start"}
      </button>
      <p className={styles.text}>{transcript || "Empieza a hablar..."}</p>
    </div>

Dado que en React el renderizado ocurre varias veces, si creo la instancia de SpeechRecognition directamente en el cuerpo del componente, cada render crearía una nueva instancia, perdiendo la anterior y rompiendo la funcionalidad.

Por ello lo meto en un useEffect con un arreglo de dependencias vacío, de manera que se ejecute solo una vez al montar el componente, creando la instancia una sola vez.

useEffect(() => {
    if (typeof window === "undefined") return;

    const SpeechRecognition =
      window.SpeechRecognition || window.webkitSpeechRecognition;

    if (!SpeechRecognition) {
      console.error("Este navegador no soporta SpeechRecognition");
      return;
    }
    
    ref.current = new SpeechRecognition(); 
    ref.current.continuous = true;
    ref.current.interimResults = true;
    ref.current.lang = "es-ES";
    ref.current.onresult = (event) => {
      const last = event.results.length - 1; //event.results contiene los resultados reconocidos
      const result = event.results[last];
      if (result.isFinal) {
        const text = event.results[last][0].transcript;
        setTranscript((prev) => prev + " " + text); //concatenamos las palabras que reconoce
      }
    };
  }, []);

useEffect(() => {
    if (typeof window === "undefined") return;

    const SpeechRecognition =
      window.SpeechRecognition || window.webkitSpeechRecognition;

    if (!SpeechRecognition) {
      console.error("Este navegador no soporta SpeechRecognition");
      return;
    }
    
    ref.current = new SpeechRecognition(); 
    ref.current.continuous = true;
    ref.current.interimResults = true;
    ref.current.lang = "es-ES";
    ref.current.onresult = (event) => {
      const last = event.results.length - 1; //event.results contiene los resultados reconocidos
      const result = event.results[last];
      if (result.isFinal) {
        const text = event.results[last][0].transcript;
        setTranscript((prev) => prev + " " + text); //concatenamos las palabras que reconoce
      }
    };
  }, []);

Creo una variable de estado para saber si la aplicación está escuchando (isListening) lo que dice el usuario y otra para guardar la transcripción que la interfaz va a ir generando a medida que el usuario habla (transcript). Usamos useRef para guardar la instancia de SpeechRecognition() para asegurarnos de que haya una sola instancia durante toda la vida del componente, y que un re-render no rompa la funcionalidad.

const [isListening, setIsListening] = useState(false);
const [transcript, setTranscript] = useState("");

const ref = useRef(null);

const handleClick = () => {
    if (!isListening) {
      ref.current.start();
    } else {
      ref.current.stop();
    }
    setIsListening(!isListening); 
  };

const [isListening, setIsListening] = useState(false);
const [transcript, setTranscript] = useState("");

const ref = useRef(null);

const handleClick = () => {
    if (!isListening) {
      ref.current.start();
    } else {
      ref.current.stop();
    }
    setIsListening(!isListening); 
  };