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á:
<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.
0 comentários:
Postar um comentário