Olá pessoal! Possuo alguns conteúdos em meu blog, vou compartilhar aqui com vocês. Espero que gostem.

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!

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?

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!

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.

Annyang: Processamento de áudio com JavaScript

O que é Annyang?

Onde encontrar?

Como funciona?