Annyang: Processamento de áudio com JavaScript

Olá, hoje estou aqui para mostrar a vocês como fazer processamento de áudio com javascript através de um Framework bem simples e prático.

Hoje em dia a internet se atualiza e muda a cada dia, assim surgem novos recursos a todo momento. Esses dias enquanto estava estudando e procurando por recursos diferentes encontrei um Framework javascript que simplesmente me chamou a atenção, seu nome é Annyang!

[wp_ad_camp_3]

O que é Annyang?

Annyang é um framework javascript para implementar comandos de voz em sua aplicação ou website. Com simples parametrizações você consegue fazer praticamente qualquer coisa!

Onde encontrar?

[wp_ad_camp_1]

O Annyang encontra-se disponível no seu website oficial (https://www.talater.com/annyang/), lá você já pode interagir com a página e ver possibilidades que possam ser atingidas.

Como funciona?

Para fazer o uso do Framework é necessário que seu website/aplicação seja disponibilizado através do protocolo HTTPS e após incluir uma linha de código a biblioteca já fica disponível para usar.

Apesar do website oficial dar um exemplo de uso, eles fazem isso em inglês! Então vamos criar uma simples aplicação para você ver esse magnifico Framework agindo!

[wp_ad_camp_2]

Primeiro vamos criar um index.html e um app.js para escrever nossa lógica fonte.

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>AnnyAng</title>
	<meta charset="utf-8" />
</head>
<body>

	<b><i>Utilização: </b></i>
 
	* "escreva..." 
	* "acessar www.google.com.br" 
	* "fechar guia" 
	* "limpar" (limpar tela)

	* "Fundo azul"
	* "Fundo amarelo"
	* "Fundo verde"


	
        <div id="texto">
   
	</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
<script src="app.js"></script>

</body>
</html>

 

app.js

$(function () {
        var windowJanela;
	// configurando o annyAng
	if( annyang ) {
		// Definicao do primeiro comando. Primeiro texto de chamada e depois a funcao ou texto a escrever
		var commands = {
			'limpar': function() {
				$("#texto").html("");
				$("body").css({"background-color" : "white"});
			},
			'escreva *term': function(term) {
			  $("#texto").html($("#texto").html()+" "+ term);
			},
			'acessar *term': function(term) {
				windowJanela = window.open('http://'+term, 'teste');
			},
			'fechar guia': function(term) {
				 windowJanela.close();
			},
			'fundo *term': function(term) {
				if(term == "vermelho"){
					$("body").css({"background-color" : "darkred"});
				}
				if(term == "verde"){
					$("body").css({"background-color" : "green"});
				}
				if(term == "azul"){
					$("body").css({"background-color" : "blue"});
				}
				if(term == "amarelo"){
					$("body").css({"background-color" : "yellow"});
				}
				if(term == "preto"){
					$("body").css({"background-color" : "black"});
				}
			}
		};

	  //Idioma...
	  annyang.setLanguage("pt-BR");
	  
	  // Adicionar comandos para a API (annyang)
	  annyang.addCommands(commands);

	  // Iniciar escuta. Podera ser chamado aqui ou carregado por um evento ou botao, etc
	  annyang.start();
	}
});

Obs: Caso a aplicação não esteja rodando sobre o protocolo de segurança HTTPS, os browsers vão ficar pedindo constantemente a autorização.

Obrigado pela visita, cliquem aqui para baixar o exemplo 😉

Comments

  1. Luciano

    Oi hiago. Gostei muito da sua aplicação no html. Será que vc consegue reproduzir esse mesmo script no Shiny.

    1. Post
      Author

Deixe um comentário

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