02 – Javascript – Web Audio API – Construindo um Teremim

toticavalcanti

Construindo um Teremim com a Web Audio API.

De acordo com a wikipédia, “o teremim é um dos primeiros instrumentos musicais completamente eletrônico, controlado sem qualquer contato físico pelo músico. Seu nome vem da versão ocidental do nome do seu inventor, o russo Léon Theremin, que patenteou seu dispositivo em 1928.”

Construindo um Teremim com a Web Audio API

Vamos construir nosso web theremin? 🙂

Trata-se de um teremim controlado pelo movimento do mouse no eixo X.

Quanto mais a esquerda, mais grave é o som, quanto mais a direita, mais agudo.

Temos algumas dependências: CSS less.min.js e jquery.

Por isso, vou deixar o link para vocês baixarem o código e as dependências:

https://github.com/toticavalcanti/web_audio_api

Fiz duas versões, uma usando Self-Invoking Functions e outra usando função normal.

De qualquer forma, os códigos referentes ao teremim propriamente dito, vou mostrar aqui no post também, mas, apenas a versão usando Self-Invoking Functions.

Quem quiser ver a versão com a chamada normal a função, é só acessar o meu github nesse link ou no link logo acima.

O index_auto_chamada.html (Self-Invoking Functions):


<html>
    <head>
        <title>Web Audio API - Osciladores e Frequência</title>
        <script src="../dependencies/jquery.min.js"></script>
        <script src="teremim.js"></script>
        <link rel="stylesheet/less" href="../css/site.less">
        <script src="../dependencies/less.min.js"></script>
    </head>
    <body>

        <h3>Osciladores e Frequência</h3>

        <div class="buttons">
            <button id="liga">Liga</button>
            <button id="desliga">Desliga</button>
        </div>
        <span id="x">0</span>
        <span id="y">0</span>

    </body>
</html>

E o teremim_auto_chamada.js (Self-Invoking Functions):


$( function() {

  // Instancia um contexto de Audio
  var context = new AudioContext();

  // variável que vai representar o oscilador
  var oscillator;

  // pega os elementos de botão para que possamos anexar eventos a eles
  // Note o uso do $ e do # em $('#liga'); típico do jquery.
  // Com javascript puro a chamada seria document.getElementById("liga").innerHTML;
  var noteOn  = $('#liga');
  var noteOff = $('#desliga');
  // obtém os elementos span x e y para que possamos exibir valores deles
  var x       = $('#x');
  var y       = $('#y');

  noteOn.on('click', function(e) {
    // Isso evita criar uma nova referência ao oscilador 
    // e a antiga ficar para sempre inacessível.
    if (oscillator) {
      return;
    }

    // crie o nó do oscilador
    oscillator = context.createOscillator();

    // define seu tipo
    oscillator.type = 'sine'; // sine, triangle, sawtooth, square

    // define sua frequência em Hertz
    // oscillator.frequency.value = 334;
    // conecte-o à saída
    oscillator.connect(context.destination);

    // Inicia o Teremim com zero!
    // um valor diferente de 0 nos permitirá ligar ele
    oscillator.start(0);
  });

  noteOff.on('click', function(e) {
    if(oscillator) {
      // Para o oscilador imediatamente
      oscillator.stop(0);
      // define a variável como null para que saibamos que nada está sendo reproduzido.
      oscillator = null;
    }
  });

  $('body').on('mousemove', function(e) {
    // Pega o movimento do mouse nos eixos X e Y!
    var xValue = e.clientX;
    var yValue = e.clientY;

    // dêem uma olhada nos valores ao movimentar o mouse
    x.text(xValue);
    y.text(yValue);

    // se não temos um oscilador funcionando nesse momento, então, 
    // não temos nada mais a fazer aqui, apenas retornar
    if (!oscillator) {
      return;
    }

    // define a frequência para a posição x do mouse!
    oscillator.frequency.value = xValue;
  });

});

O código tá todo comentado para que você entenda cada parte.

Quero apenas ressaltar o uso do $ e do # em $(‘#liga’); típico do jquery.

Com javascript puro a chamada $(‘#liga’); seria document.getElementById(“liga”).innerHTML;

E ressaltar também o uso de Self-Invoking Functions, que já falei antes, que é uma função que chama a ela mesma automaticamente.

Repetindo, no meu repositório tem as duas versões, usando Self-Invoking Functions e também uma versão usando chamada a função teremim normal.

Eu particularmente acho o uso de Self-Invoking Functions mais legal e mais elegante no caso do nosso Teremim.

Façam testes, modifiquem o código, brinquem a vontade.

Um teste simples é trocar o oscillator.type.

Na próxima aula usaremos a matemática para produzir notas.

Com isso encerramos mais essa.

Curta a página do Código Fluente no Facebook
https://www.facebook.com/Codigofluente-338485370069035/

Vou deixar meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro link é da one.com:

One.com

Obrigado, até a próxima e bons estudos. 😉

Category: Algoritmo - Linguagem de Programação, Javascript, Web Audio API com Javascript