HTML 5/ JQuery

Comandos de voz e a sua app Web

Eu não sei você, mais o mundo da tecnologia encurtou seu paradigma de mudança de 5 anos para 6 meses. E quem melhor se adaptar a isso, conseguirá tirar o máximo de proveito das oportunidades que forem surgindo.
Até um tempo atrás, eu e você tinhamos apenas 2 maneiras de interagir com sua aplicação web, via Teclado e Mouse. Nem só via Web App, mais também aplicações desktop.
Passou e muito o tempo que isso era artigo de luxo, Apple lançando o Magic Mouse, Microsoft e seus maravilhosos teclados série 5000. Hoje temos Tablets, smartphones, smart tvs, Kinect e por ai vai.

Quando você pagou aquela matéria absurda e idiota chamada Interação Homem máquina na faculdade, você mal podia saber que isso seria realidade, caso contrário você seria um Steve Jobs. Pois é, saímos dos 2 dispositivos e entramos no jogo corporal, onde o Dedo interage com a interface e gestos realizam comandos.

Só que existe por outro lado uma revolução acontecendo silenciosamente, essa sim, é uma verdadeira maneira de como interagir com a tecnologia. Acidentalmente ou via mensagem subliminar Hollywood tem nos inspirado a interagir dessa maneira. Ou vai dizer que você nunca assistiu o Homem de ferro falando com o JAVIRS?

Já tem até gente criando algo semelhante, só que no mundo real.

O que eu estou falando é da revolução de comunicar com seu computador via comandos de voz. Quem tem por exemplo um Kinect e um XBOX Slim comprado de Nov/2010 para cá, pode interagir com seu XBOX via comando de voz , ao mesmo tempo que você usa o sistema, você ajuda os engenheiros da Microsoft a criarem um verdadeiro JAVIRS para sua vida pessoal.

E o SIRI da Apple heim? Esqueçeu dele? Pois é, chega de ficar engordurando o teclado, a sua tela, o jeito e a maneira mais legal de se interagir com seu sistema é realmente via comando de voz e quando isso passar a ser um diálogo como o Watsom da IBM, a coisa vai mudar de cenário.

Talvez quando eu e você tiver 40 anos, daqui 1 década, isso vai ser tão comum, como comprar um pendrive de 16GB na esquina. Não é KurzWeil.

Em fim, eu terei que esperar tanto tempo assim para que essa revolução seja real, para que eu tenha um assistente do tipo JAVIRS ou coisa parecida, bom, só o senhor do tempo dirá, mais hoje você pode testar no SIRI se tiver um iphone, XBox, ou usar as tecnologias da NUANCE. Que na verdade, é a única empresa no mundo que tem expertise no assunto e que está por trás do SIRI e do XBOX Kinect voice commands.

Alias, tanto blá blá blá, eu posso usar isso em uma aplicação real? Bom Poder pode, desde que seu cliente ou você use o navegador Google Chrome ou qualquer navegador web que tenha o engine Webkit para mobile. Assim você pode usar comandos de voz para fazer uma pesquisa, criar novos itens e por ai vai.

Um fato importante mencionar é que, como 99% dos navegadores Mobile usam o Webkit, então provavelmente será fácil, fazer funcionar os comandos de voz pelo lado mobile também.

O Google como sempre saiu na frente, e lançou até uma especificação no W3C sobre o assunto. Onde eu acredito fortemente que a semântica da Web terá muito mais dinamismo, já que o futuro de plug-ins em navegadores é incerto.

Na especificação menciona que se você usar o código:

 
x-webkit-speech

Em seu tag de Input, você dará habilidades de apresentar o seguinte resultado abaixo:



O resultado acima, foi feito apenas com o seguinte código.

<form>
      <fieldset>
                   <label>Fale:</label>
                   <input x-webkit-speech type="text" lang="pt_BR"/>
      </fieldset>
</form>

Clique no ícone do microfone e você pode falar em português mesmo do Brasil e ele vai preencher o campo de input com o que ele entendeu de sua fala.

Ai me veio umas idéias, eu poderia fazer esse mesmo experimento usando alguns eventos do Speech e também usando jQuery para realizar algumas mashups.

A primeira delas é uma App simples de TO-DO-LIST, teste a App abaixo, basta clicar no ícone do microfone e falar.

O código da App acima você pode pegar aqui abaixo:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TO-DO-LIST com comando de voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
 
	form,div {width:400px; margin:0 auto;}
	ul { list-style:none;}
</style>
 
<!-- Código do JQuery para o TO-DO-LIST VIA COMANDO DE VOZ -->
<script type="text/javascript">
	$(document).ready(function(e) {
 
		// escuto a mudança do texto quando for preenchido
		// o campo e executo uma função
        $("#nova_tarefa").live('webkitspeechchange','',function(e){
 
				addTarefa($(this).val());
		});
 
		// limpar todas as tarefas adicionadas
		$("#btnLimpar").click(function(e) {
            	$("#tarefas").html('');
        });
    });
 
		function addTarefa(value){
				$("#tarefas").append('<li><input type="checkbox"/>'+value+'</li>');
				$("#nova_tarefa").val('');
		}
</script>
 
 
</head>
 
<body>
	<form>
    	<fieldset>
        <label>Nova tarefa:</label>
        <input id="nova_tarefa" x-webkit-grammar="builtin:search" lang="pt-BR" type="text" speech x-webkit-speech/>
		 <a href="#" id="btnLimpar">Limpar lista</a>
    	</fieldset>
    </form>
    <div>
    		<ul id="tarefas">
            </ul>
    </div>
</body>
</html>

Para funcionar eu usei uma série de atributos que estão habilitados e não documentos pelo Google, porém se você for analisar o código acima, bem especificadamente nos atributos, verá que tem um built-in search, eu uso o que o Google já possui, um dicionário baseado em SGRL, como especificado no Próprio navegador e seu dicionário de termos.

x-webkit-grammar="builtin:search" lang="pt" type="text" speech x-webkit-speech/

Tudo é possível através do x-webkit-speech, que reconhece todo o trabalho a ser realizado, consultando o serviço do Google, sintetizando a voz, e o retorno disso é um JSON com o termo que ele entendeu baseado no que foi falado, você até pode consultar o código fonte do Chrome aqui.

Ai eu pensei, bom, por que não fazer uma mashup legal, do tipo, pesquisar termos do Twitter, ou postar alguma coisa no twitter falando ao invés de escrevendo.

O código do aplicativo ai acima é esse aqui:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Web e comandos por voz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<style type="text/css">
	body{font-family:Verdana, Geneva, sans-serif; font-size:16px;}
	form,div {width:400px; margin:0 auto;}
 
</style>
 
<script type="text/javascript">
    $(document).ready(function(e) {
 
        var URL_SUFIX = "&result_type=mixed";
 
 
        $("#tweettermo").live('webkitspeechchange','',function(e){
             $.getJSON("http://search.twitter.com/search.json?q="+$("#tweettermo").val(),"&callback=?",function(data){
				 $("#resultado").html('');// limpar a cada nova busca
                $.each(data.results, function(i,tweet){
                     // this is where we do what we want with the tweet
                     $("#resultado").append('<p><img src="'+tweet.profile_image_url+'" align="left" />'+tweet.text+'</p><br/>');
                });
             });
 
 
        });
   });
</script>
</head>
 
<body>
<div><img src="twitter_logo.png"/></div>
<form>
<input id="tweettermo"  size="41" autocomplete="off" dir="ltr"
 spellcheck="false" x-webkit-grammar="builtin:search" lang="pt"
 type="text" speech x-webkit-speech>
 </form>
 	<div id="resultado">
 
    </div>
</body>
</html>

Legal não é? Isso abre uma porta absurda para novas implementações, interações com o usuário e você pode até criar seu assistente pessoal JAVIRS combinando strings e comandos.

Até a próxima

5 thoughts on “Comandos de voz e a sua app Web

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *