Usando Google Speech para elementos HTML con JavaScript

Por el

Hace pocos Google implemento la búsqueda por voz  en su pagina principal para el dominio en ingles, de la misma manera como en los dispositivos con Android. Como lo dicen en el artículo publicado en Google Docs, esta sería una propuesta para añadir soporte de reconocimiento de voz para HTML5.

Lamentablemente por el momento esta funcionalidad solamente está disponible en el navegador Chrome sin embargo soporta el reconocimiento de voz en varios idiomas incluido el español.

Gracias a esto es posible mejorar muchas aplicaciones, como búsqueda en la web por voz, traducción de voz, videollamadas, etc. En este caso probaremos el ejemplo en un campo de texto para buscar las entradas de un blog en WordPress.

Haciendo el Ejemplo:

  • Agregaremos al elemento INPUT la propiedad  x-webkit-speech
  • Luego el evento onwebkitspeechchange aquí donde hará un llamada a cualquier función, después que ya se haya reconocido la voz.
En el caso que quisiera implementarlo para mi formulario de búsqueda de WordPress, seria así:
<form id="searchform" action="https://neysitc.com/" method="get">
      <input type="text" name="s" id="s" x-webkit-speech="" onwebkitspeechchange="buscarPorVoz()">
</form>

Agregado la propiedad debería mostrar  el icono de un micrófono el campo de texto, la siguiente imagen representa el cambio de los íconos en los eventos que se producen:

Ahora implementamos la función que permitirá enviar el formulario:

<script type="text/javascript">
function buscarPorVoz()
{
  var frm = document.getElementById("searchform");
  frm.submit();
}

</script>

Es indispensable tener conectado el micrófono (obvio!) para probar el ejemplo.
Pulse para ver la demostración

Esto sería de lujo si se llegara a implementar nativamente para HTML5.  ¿Imagínese el provecho que sacaría en sus aplicaciones esta funcionalidad?.

Comentarios

  1. Genial, lo he visto por primera vez en otra web (aquí http://www.digett.com/services/website-design) y estaba buscando si era alguna librería Javascript o una implementación de Chrome (es el mismo icono que en Android), ya que en el fuente no aparecía. Lo generarán al vuelo con JS imagino si detectan Chrome.

    En cualquier caso, gracias porque todo lo que encontraba en Google era noticias sobre el plugin, Android, etc.

  2. x-webkit-speech ya no sirve.

Deja un comentario