Front End

11 mai, 2018

Criando música no navegador com o Tone.js

Publicidade

É verdade que cada um de nós possui características e manias únicas, mas quando olhamos para os profissionais de tecnologia, seja aqui no Brasil, em Portugal, no Canadá ou nos Estados Unidos, há várias coisas parecidas em sua grande maioria. Um exemplo disso é o nosso gosto incontestável por música na hora de programar.

Ser absorvido no contexto da música ajuda a nos isolar do mundo e se concentrar na resolução dos problemas técnicos dos nossos códigos. E falando em música, sabia que é possível trabalhar com sons e criar músicas completas diretamente do navegador? Pois é, tudo isso graças a Web Audio API.

Neste artigo, quero mostrar a vocês como podemos criar instrumentos virtuais e músicas utilizando apenas HTML, CSS e JavaScript. Para nos ajudar nesta tarefa de trabalhar com a Web Audio API, utilizaremos o Tone.js. Veremos como criar um som bacana.

Conheça o Tone.js

De acordo com o próprio site oficial do projeto, o Tone.js é um framework para criar músicas interativas no navegador. Ele fornece recursos avançados de programação (no sentido de agendamento), sintetizadores, efeitos, e abstrações musicais intuitivas, construídas sobre a Web Audio API. A arquitetura dele foi trabalhada para ser familiar tanto para músicos quanto para programadores de áudio que desejam criar aplicativos de áudio baseados na web.

No nível superior, o Tone oferece recursos comuns de uma estação de trabalho de áudio digital, como um transporte global para programar eventos e sintetizadores, e efeitos pré-construídos. Para programadores de processamento de sinais (vindos de idiomas como Max / MSP), o Tone fornece uma grande quantidade de blocos de construção de alta performance, baixa latência e módulos DSP para construir seus próprios sintetizadores, efeitos e sinais de controle complexos.

Não entendeu nada do que foi dito no parágrafo anterior? Não se preocupe, aqui no artigo não levaremos o projeto tão a sério. Faremos somente alguns testes para brincar com a ferramenta e fazer um som bacana.

Hello tone

Há várias maneiras de trabalhar com o Tone.js; todas elas muito bem explicadas nessa documentação. Para tornar o artigo mais didático, vamos criar os experimentos diretamente no CodePen.

Para isso, basta importar a biblioteca para dentro da plataforma e ela irá dispor a variável Tone globalmente para uso. Para fins de demonstração, também incluiremos a dependência do Waveform.js. Como o próprio nome já indica, com ele conseguiremos ver as ondas formadas pelos sons gerados pelo Tone.js.

Utilize os links a seguir, como mostra a imagem:

Configurando o Tone.js no CodePen

Não se esqueça de desabilitar o Auto Preview da ferramenta. Caso contrário, começaremos a perder o controle sobre o som produzido:

Desabilitando o Auto Preview

Feito isso, já estamos prontos para colocar a mão na massa. O primeiro código que faremos é um sintetizador básico com um único envelope e um único oscilador. Faremos ele tocar uma simples nota.

// cria um sintetizador e o conecta à saída principal (seus alto-falantes)
var synth = new Tone.Synth().toMaster()
synth.triggerAttackRelease('C4', '8n')

Conseguiu reproduzir a nota aí também? Bem interessante, né?

O método Tone.Synth() é basicamente o sintetizador. O método triggerAttackRelease() combina dois outros métodos: triggerAttack() e triggerRelease(). O primeiro sinaliza quando a amplitude está aumentando (por exemplo, de um evento ‘key down’ ou ‘note on’), e o segundo quando a amplitude está voltando para 0 (‘key up’ / ‘note out).

Podemos utilizar estes métodos para fazer a nota durar enquanto um botão está sendo pressionado, por exemplo. Criaremos este exemplo no próximo tópico.

Toque somente ao meu comando!

Agora vamos fazer que a nota se mantenha ativa enquanto um botão estiver sendo pressionado. Para isso, vamos alterar nosso projeto. Primeiramente, vamos criar um corpo para o nosso projeto:

<div id="content">
  <button id="C4">C4</button>
  <button id="E4">E4</button>
  <button id="G4">G4</button>
  <button id="B4">B4</button>
</div>

Repare que aqui estamos criando os botões com os tons que desejamos trabalhar, no caso: C4, E4, G4 e B4. Agora, insira o seguinte código JavaScript:

var synth = new Tone.AMSynth().toMaster();

document.querySelectorAll('button').forEach(function(button){
    button.addEventListener('mousedown', function(e){
      synth.triggerAttack(e.target.textContent);
    })
    button.addEventListener('mouseup', function(e){
      synth.triggerRelease();
    })
})

Por fim, insira o seguinte código CSS:

#content {
  position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

Ao final, você deve ter algo semelhante a isso no seu CodePen:

Tocando notas musicais usando JavaScript

Tocou as notas? Bem legal, né? Seguindo essa mesma lógica, podemos criar um pequeno teclado virtual.

Mais exemplos

Existe uma série de demos e exemplos completos no site e no repositório oficial do site. Para acessá-los, basta entrar neste link. Para cada um dos exemplos, você encontrará o botão de acesso ao código fonte. Além disso, existe a página de Demos. Lá, pessoas de todo o mundo que utilizaram a biblioteca para algum projeto tem seus projetos expostos, como é o caso dos interessantíssimos: Chrome Music Lab, Learning Music e o Groove Pizza.

Caso você não tenha conseguido reproduzir os passos, basta dar um fork neste link.

Referências