Convertir de voz a texto con Javascript

En este tutorial vamos a experimentar con la API Web Speech. Es una potente herramienta que te permite grabar voz humana y convertirla a texto. También la utilizaremos para lo contrario, es decir, leer cadenas para convertirlas en voz (en esta vez robótica ;-) ) ¿Todo claro? ¡Pues vamos a empezar!

De voz a texto

La API de Web Speech está dividida en dos interfaces totalmente diferentes. Tenemos SpeechRecognition para transforma la voz humana a texto (Speech > Text) y SpeechSynthesis para leer cadenas de texto y transformarlas a una voz generada por ordenador (Text > Speech).

La API Speech Recognition, sorprendentemente es muy precisa para ser una aplicación para navegadores. Reconoce casi de manera perfecta todas las palabras y sabe qué palabras utilizar para formar frases con sentido. También agrega automáticamente puntos y aparte, símbolos de interrogación y demás caracteres.

Lo primero que tenemos que hacer es comprobar si el usuario cuenta con acceso a la API y mostrar un mensaje de error si acaso no lo está. Desafortunadamente, la API solo está disponible para Chrome y Firefox, por lo que, desgraciadamente, muchos serán los que vean este mensaje.

try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}

La variable recognition nos darña acceso a todos los métodos y propiedades de la API. Hay muchas opciones disponibles pero, por ahora, solo definiremos el recognition.continuous a true. Esto permitirá a los usuarios hablar con pausas más largas entre palabras y frases.

Antes de utilizar el reconocimiento de voz, también tenemos que configurar un par de controladores de eventos. La mayoría de ellos simplemente detectarán los cambios en el estado de recognition:

recognition.onstart = function() { 
  instructions.text('Voice recognition activated. Try speaking into the microphone.');
}

recognition.onspeechend = function() {
  instructions.text('You were quiet for a while so voice recognition turned itself off.');
}

recognition.onerror = function(event) {
  if(event.error == 'no-speech') {
    instructions.text('No speech was detected. Try again.');  
  };
}

Sin embargo, hay un evento onresult especial que es muy importante conocer. Se ejecuta cada vez que el usuario dicta una palabra o varias de forma rápida, dándonos acceso a una transcripción de texto de lo que dijo.

Cuando capturamos algo con el controlador onresult, lo guardamos en una variable global y lo mostramos en un textarea.

recognition.onresult = function(event) {

  // event is a SpeechRecognitionEvent object.
  // It holds all the lines we have captured so far. 
  // We only need the current one.
  var current = event.resultIndex;

  // Get a transcript of what was said.
  var transcript = event.results[current][0].transcript;

  // Add the current transcript to the contents of our Note.
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

Existe un error muy extraño en los dispositivos Android que hace que todo se repita dos veces. Todavía no cuenta con una solución oficial. Con ese error en mente, el código se vería así:

var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);

if(!mobileRepeatBug) {
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

Una vez tengamos todo configurado, podemos empezar a utilizar la característica de reconocimiento de voz del navegador. Para empezar, simplemente llamamos al método start().

$('#start-record-btn').on('click', function(e) {
  recognition.start();
});

Esta acción solicitará permiso a los usuarios. Si se concede, el microfono del dispositivo se activará.

El navegador comenzará a escuchar y transcribirá cada frase o palabra que reconozca. La API parará cuando detecte que lleva un par de segundos sin recibir sonido o cuando lo detengas manualmente.

$('#pause-record-btn').on('click', function(e) {
  recognition.stop();
});

Con esto, tendremos nuestra función de voz a texto. Ahora que ya sabemos cómo funciona, vamos a hacer lo contrario.

De texto a voz

Speech Synthesys es muy fácil de utilizar. Tendremos acceso a la API a través del objeto speechSynthesys y cuenta con un par de métodos para reproducir, pausar y otras acciones relacionadas con el audio. También tiene unas cuantas opciones “chorras” para cambiar incluso la voz de la transcripción.

Todo lo que tenemos que hacer es utilizar el método speak(). Tendrás que pasarle como argumento una instancia de la clase SpeechSynthesisUtterance.

Aquí tienes el código completo que utilizaremos para leer una cadena.

function readOutLoud(message) {
  var speech = new SpeechSynthesisUtterance();

  // Set the text and voice attributes.
  speech.text = message;
  speech.volume = 1;
  speech.rate = 1;
  speech.pitch = 1;

  window.speechSynthesis.speak(speech);
}

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP