Arpeggiator

Como funciona um arpejador

Um arpejador não inventa harmonia. Ele recebe as notas que você escolhe, organiza essas notas em um padrão e agenda cada som no instante certo. O caminho tem quatro etapas:

1. Entrada das notas: cliques no teclado da tela ou teclas do computador.
2. Gerador de padrão: subindo, descendo, aleatório, em várias oitavas.
3. Agendador de áudio: as notas são marcadas com antecedência no relógio do áudio.
4. Voz do sintetizador: oscilador, envelope e filtro produzem cada nota.

1. Notas viram números

Cada tecla do piano é representada por um número MIDI. O Dó central é 60, o Dó sustenido é 61, o Ré é 62, e assim por diante. Com isso, transpor e repetir em outras oitavas vira aritmética simples: uma oitava acima é somar 12.

2. O número MIDI vira frequência

O oscilador precisa de uma frequência em hertz, não do nome da nota. No temperamento igual, cada semitom multiplica a frequência por $2^{1/12}$. Usando o Lá4 (MIDI 69) com 440 Hz como referência:

Por exemplo, o Dó central ($n=60$) fica em $440\cdot 2^{-9/12}\approx \mathrm{261,6}$ Hz.

3. O acorde vira uma sequência

No padrão subindo, as notas são ordenadas da mais grave para a mais aguda, e as oitavas extras são criadas somando 12 semitons. A sequência toca exatamente as notas que você escolheu, sem acrescentar nenhuma: um Cmaj7 de uma oitava soa Dó, Mi, Sol, Si. Os outros padrões invertem, espelham ou embaralham essa lista.

O padrão aleatório é sorteado só quando as notas, o padrão, a extensão ou a transposição mudam. Mexer no andamento ou no timbre não reembaralha a sequência.

4. O andamento define o relógio

O andamento em BPM diz quantos tempos cabem em um minuto, e a divisão diz que fração do tempo cada passo ocupa:

A 120 BPM, um tempo dura meio segundo. Uma semicolcheia (1/16) é um quarto disso, então um passo novo começa a cada 125 ms.

O swing alonga o primeiro passo de cada par e encurta o segundo na mesma medida, então toda segunda nota chega um pouco atrasada. Com swing $s$ (de 0 a 0,6):

A contagem de pares usa o número total de passos desde que a música começou, e não a posição na sequência. Assim o balanço continua alternando mesmo quando a sequência tem um número ímpar de notas.

5. Por que não tocar as notas com setInterval?

Os temporizadores do JavaScript podem atrasar por causa da renderização, da rolagem ou de outras tarefas da página. Um atraso de 20 ms já é audível num ritmo de semicolcheias. Por isso o projeto separa decidir de tocar:

• um laço curto acorda a cada 25 ms e marca as notas que caem nos próximos 100 ms;
• cada nota é agendada no relógio da Web Audio, que roda fora da página e toca no instante exato;
• a tela acompanha o mesmo relógio: a nota destacada muda num laço de animação que lê a fila de notas agendadas.

function scheduler() {
  while (nextNoteTime < audioContext.currentTime + 0.1) {
    const midi = sequence[step % sequence.length]
    playVoice(midi, nextNoteTime, gateTime)
    nextNoteTime += stepDuration(step)
    step++
  }
}

setInterval(scheduler, 25)

6. O sintetizador cria o som

A cada passo, o navegador cria uma voz nova e a descarta quando o som termina:

1. Dois osciladores geram a onda (senoide, triangular, quadrada ou dente de serra). O segundo fica levemente desafinado, o que alarga o som.
2. O envelope controla o volume ao longo da nota: sobe durante o ataque, cai um pouco, se mantém enquanto a nota dura e some durante a liberação.
3. O filtro passa-baixas corta as frequências acima do ponto de corte, e a ressonância reforça a região em volta dele.
4. A saturação e o eco dão cor e espaço, antes do compressor e dos alto-falantes.

Com uma duração de nota muito curta, a nota pode acabar antes de o ataque terminar. Nesse caso, cada etapa do envelope é limitada ao fim da nota, para as automações de volume nunca voltarem no tempo.

7. A aceleração é automação de parâmetros

A aceleração (em produção musical, build-up ou riser) encurta aos poucos o intervalo entre as notas. Ao mesmo tempo, abre o filtro e aumenta a saturação. Com o progresso $p$ indo de 0 a 1 e a velocidade final $v$:

Como a divisão é por uma potência, a aceleração é exponencial: com $v=4$, na metade do caminho os passos já estão duas vezes mais curtos. O corte do filtro sobe da mesma forma, até cerca de 12 kHz.

8. A saturação curva a forma de onda

Um WaveShaperNode passa cada amostra por uma curva não linear. Aqui a curva é a tangente hiperbólica, normalizada para que $x=\pm 1$ continue em $\pm 1$:

Quanto maior a intensidade, mais a curva achata os picos da onda, e esse achatamento cria harmônicos novos. O controle de mistura combina o caminho limpo com o saturado (com ganhos em cosseno e seno, para o volume percebido não mudar), então o som ganha densidade sem precisar ficar agressivo.

9. O espectro mostra o filtro agindo

Um AnalyserNode aplica a transformada rápida de Fourier (FFT) na saída final. O eixo horizontal é logarítmico, como o espaçamento das oitavas: cada frequência $f$ vai para a posição

Cada quadro é normalizado para que o componente mais forte fique em 0 dB. Isso facilita comparar a forma do espectro e ver o corte do filtro: mova o corte e os harmônicos à direita do marcador somem.

O que cada controle altera

Mude um parâmetro por vez e escute a diferença.

Tempo e movimento

• Padrão: a ordem das notas (subindo, descendo, sobe e desce, ordem escolhida ou aleatória).
• Divisão: a duração rítmica de cada passo.
• Andamento: a velocidade geral, em BPM.
• Duração da nota: a fração do passo em que a nota fica soando.
• Swing: o atraso aplicado a cada segundo passo.

Notas e altura

• Oitava do teclado: escolhe as notas atribuídas às teclas de A a K.
• Extensão: copia as notas selecionadas uma ou duas oitavas acima.
• Transposição: move a sequência inteira, mantendo os intervalos escolhidos.
• Acordes prontos: selecionam as notas de um acorde de uma vez; o arpejador continua tocando uma nota por vez.

Envelope e filtro

• Ataque: quão rápido o som chega ao pico depois que a nota começa.
• Liberação: quanto tempo o som leva para sumir depois que a nota termina.
• Corte do filtro: a frequência mais alta que o filtro passa-baixas deixa passar.
• Ressonância: um reforço em volta da frequência de corte.

Timbre, espaço e automação

• Oscilador: a forma de onda e o caráter harmônico do som.
• Eco: repetições sincronizadas com o andamento, misturadas atrás da nota.
• Intensidade da saturação: quanto o sinal é empurrado para a curva não linear.
• Mistura da saturação: o equilíbrio entre o caminho limpo e o saturado.
• Desafinação analógica: a pequena diferença de afinação entre os osciladores, que dá largura e movimento.
• Aceleração: a rampa que aumenta velocidade, corte e saturação até você zerar.

Tudo acontece no navegador

• Sem arquivos de áudio: todo som é gerado em tempo real por osciladores.
• Sem bibliotecas de áudio: o motor usa só a Web Audio API.
• Sem envio de dados: as notas e o áudio ficam no seu aparelho.