15.- Juegos y Multimedia HTML5 - Web Speech API, de voz a texto.

En la anterior entrega del curso acabamos de ver lo más básico del Web Audio API. Para seguir un poco con el tema del sonido en el navegador, hoy vamos a ver el Web Speech API. ¡Pasar de voz a texto nunca había sido tan fácil! En un corto y sencillo videotutorial vamos a explicar las dos formas de acceder al micrófono para transcribir audio. La primera de ellas es la forma más sencilla y extendida de hacerlo. Se trata de una etiqueta de tipo input:
<input x-webkit-speech>
     La segunda forma de hacerlo es algo más complicada, pero se explica detenidamente en el vídeo. En la parte de abajo del artículo podéis encontrar el código de los ejemplos del vídeo y además en enlace a la página ejemplo del vídeo y a otro ejemplo de Google.



    Además de los códigos que aparecen en el videotutorial os recomiendo mirar detenidamente el código de este ejemplo. En él podréis encontrar una lista de los idiomas soportados y podréis ver la forma de utilizar el Web Speech API con interimResults = true, es decir, comprobando los resultados obtenidos.

Código 1, etiqueta input. Como es un ejemplo tan sencillo os dejo aquí un ejemplo de como funciona:



<!DOCTYPE html>
<html>
  <head>
    <title>Probando Speech</title>
  <body>
    <input x-webkit-speech>
  </body>
</html>

Código 2. Visita la página funcionando aquí.

<!DOCTYPE html>
<html>
  <head>
    <title>Probando Web Speech API</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #f25F6e;
        }
    </style>
    <script type="text/javascript">

        var speech = new webkitSpeechRecognition();
        speech.continuous = true;
        speech.interimResults = false;
        speech.lang = "es-ES";

        speech.onresult = function (event)
        {
            var textArea = document.getElementById("textArea");
            textArea.innerHTML += event.results[event.results.length-1][0]
                .transcript;
        }

        speech.onend = function ()
        {
            console.log("Fin speech");
        }

        speech.start();

    </script>
  </head>
  <body>
    <textarea id="textArea" style="width: 400px">
        Lo que hables aparecerá aquí: 
    </textarea>
  </body>
</html>

Índice del curso

9 comentarios :

  1. sabes como puedo hacer para que al decir "play" se reprodusca un video en html5?

    ResponderEliminar
    Respuestas
    1. Pues comprobando que el usuario haya dicho "play" y luego acceder al elemento vídeo e iniciar la reproducción con el método play().
      El principal problema podría ser que hay que darle permisos a la página web para que se pueda acceder al micrófono. Esto hace que haya que darle a un botón para iniciar a escuchar el audio, lo que podría chocar con el objetivo de hacer que un vídeo se reproduzca sin tocar el ratón, solo con el teclado.
      Me parece que si utilizas el protocolo https no es necesario darle permisos, directamente escucharía el audio.

      Eliminar
  2. Hola amigo q tal, una pregunta en donde editas el código?

    ResponderEliminar
    Respuestas
    1. El código en este videotutorial lo edito con sublime text 2.

      Eliminar
  3. Hola amigo, buen tutorial
    estoy buscando la forma de detectar las notas de voz por el micrófono
    ¿alguna idea?
    primero buscaba alguna solución que brindara html5, pero no encontré nada semejante, quizás tenga que dejar esa tarea para un modulo en flash, aunque flash y yo no somos tan amigos, por eso buscaba alguna otra forma.

    ResponderEliminar
    Respuestas
    1. Hola Marcelo,

      Creo que este ejemplo podría ayudarte: http://webaudiodemos.appspot.com/pitchdetect/index.html

      Un saludo!

      Eliminar
  4. Un cordial saludo, e intentado de mil maneras y nada que me aparece el microfono, ya tengo actualizado mi navegador y todo. AYUDA

    ResponderEliminar
  5. Ya no funciona hoy (09/05/16) ¿Alguna sugerencia? Tengo mi navegador actualizado.

    ResponderEliminar
    Respuestas
    1. ¿El demo de Google te funciona, no? http://www.google.com/intl/es/chrome/demos/speech.html

      Si ese sí que te funciona y el código del post no, puede que algo haya cambiado. Aquí donde me ves odio la tecnología, cambia todo tan rápido... Te recomiendo estudiar el código del ejemplo de Google que ese seguro que está actualizado. Siento no poder ayudarte más.

      Un saludo y suerte!

      Eliminar