Reconocimiento de voz en Javascript

Haz que tu sitio web entienda lo que dices

Reconocimiento de voz en Javascript

Poder hablar con tu sitio web, abre un abanico de posibilidades enorme, especialmente en términos de experiencia de usuario. Con la implementación adecuada se podría crear una tienda virtual que permita a tus usuarios hacer compras sin necesidad de tocar el teclado, el mouse, ni la pantalla táctil; únicamente utilizando su voz. Hoy te contaré como puedes disfrutar de las APIs de reconocimiento de voz que otorgan Chrome, Edge y Safari.

Construiremos una aplicación que muestre en pantalla lo que escuche y agregaremos un comando extra para abrir wikipedia por voz en sólo 3 pasos.

Puedes probar el resultado final: CodePen

1 - Detectar el navegador

const  elNavegadorEsCompatible = ()=>{
  if (navigator.userAgent.indexOf("Chrome") || 
    navigator.userAgent.indexOf("Edge") ||  
    navigator.userAgent.indexOf("Safari")) return true;
  alert('El Navegador no es compatible con el Reconocimiento de voz');
  return  false;
}

2 - Si el navegador es compatible, configurar el reconocimiento de voz

• 2.1 Esta api tiene nombres distintos según el navegador porque aún está en fase experimental, por eso las listamos todas e instanciamos la primera que consiga.

if(elNavegadorEsCompatible()){
  const  recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
}

• 2.2 Definimos el idioma a escuchar (referencia sobre localización)

if(elNavegadorEsCompatible()){
  const  recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
  /* 2.2 */
  recognition.lang = "es-US";
}

• 2.3 Configuramos que cuando termine de reconocer algo vuelva a escuchar

if(elNavegadorEsCompatible()){
  const  recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();

  recognition.lang = "es-US";
  /* 2.3 */
  recognition.onend = event  => { recognition.start(); };
}

• 2.4 Pasamos la función que se llamará cuando haya un resultado del reconocimiento de voz

if(elNavegadorEsCompatible()){
  const  recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();

  recognition.lang = "es-US";
    
  recognition.onend = event  => { recognition.start(); };
  /* 2.4 */
  recognition.onresult = resultado  => {manejarResultado(resultado); };
}

• 2.5 Empezamos a escuchar

if(elNavegadorEsCompatible()){
  const  recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();

  recognition.lang = "es-US";
    
  recognition.onend = event  => { recognition.start(); };

  recognition.onresult = resultado  => {manejarResultado(resultado); };

  /* 2.5 */
  recognition.start();
}

3 - Definir la función que manejará el resultado del reconocimiento de voz

• 3.1 Pintamos los resultados en el html

const  manejarResultado = resultado  => {
  document.body.innerHTML = resultado.results[0][0].transcript
}

• Opcional: Si el resultado es igual a 'abrir wikipedia' abriremos wikipedia

const  manejarResultado = resultado  => {
  document.body.innerHTML = resultado.results[0][0].transcript
  /* Adicional */
  if(resultado.results[0][0].transcript.toLowerCase().trim() == 'abrir wikipedia'){
  const  childFrame = document.createElement('iframe');
  childFrame.src = "https://es.wikipedia.org/wiki/Wikipedia:Portada";
  childFrame.style.width = "100vw";
  childFrame.style.height = "500px";
  document.body.append(childFrame)
  }
}

Y Listo! Ya tenemos reconocimiento de voz en nuestras aplicaciones web en sólo 15 líneas de código (sin los comentarios y sin el ejemplo de abrir wikipedia)

Nota: En ambientes de producción, por motivos de seguridad la mayoría de navegadores exige tener instalado un certificado SSL que encripte los datos, ya que la voz es envíada a servidores para ser procesada por inteligencia artificial y convertida a texto.