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
Oi hiago. Gostei muito da sua aplicação no html. Será que vc consegue reproduzir esse mesmo script no Shiny.
Author
Olá Luciano, desculpe a demora. Não conheço o Shiny mas caso ele rode em um browser tá bem simples para adaptar.