Reconhecimento de voz em seu site

Para criar uma caixa de pesquisa com reconhecimento de voz basta usar o seguinte trecho de código HTML (apenas nos navegadores Chrome): <...

Para criar uma caixa de pesquisa com reconhecimento de voz basta usar o seguinte trecho de código HTML (apenas nos navegadores Chrome):







<form method="get" action="http://www.google.com/search">

 <input type="text" name="q" size="30" x-webkit-speech />

 <input type="submit" value="Google Search" />

</form>





Que produzirá:

Se você estiver usando o Google Chrome aparecerá um pequeno ícone de um microfone ao lado da caixa de texto que permitirá usar o seu (dã!) microfone para entrar os textos a serem pesquisados.



A cláusula x-webkit-speech em destaque é que produz esse efeito. Isso ocorre porque o navegador Chrome possui compatibilidade com a API de entrada de dados por reconhecimento de voz do W3C (E atualmente apenas ele).



Embora apenas a tag <input> possa ser usada  para entrada de texto por voz, com uma pequena função usando javascript você pode usar o comando também nas tags <textarea>. Como mostrado a seguir:











Ao clicar no microfone e falar o texto da caixa input a função será executada e passará automaticamente para a caixa de cima. Que é uma textarea.

O código se parecerá com isso:



<script type="text/javascript">

  function transcribe(words) {

    document.getElementById("speech").value = words;

    document.getElementById("mic").value = "";

    document.getElementById("speech").focus();

  }

</script>



<textarea cols="50" id="speech" ></textarea>

<input id="mic" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech>

Se você quiser experimentar, colocamos o reconhecimento de voz na Pesquisa Personalizada do site (no canto superior direito da página). Se você estiver usando o Chrome, basta clicar no microfone e testar.



Agora, se o reconhecimento de voz vai funcionar satisfatoriamente (ou seja, reconhecer a sua voz), aí já é outra história... :P



[Via BBA]