Quando projetamos o retorno sonoro do Lingo Ladders, tivemos uma escolha importante pela frente: baixar arquivos de áudio pesados (MP3/WAV) pela rede ou sintetizar os sons em tempo real, por código?
Para oferecer uma experiência 100% livre de royalties, privada e sem latência, criamos um motor de síntese de áudio com a Web Audio API nativa do HTML5. Este artigo mostra como funcionam os sons retrô do Lingo Ladders.
"A boa engenharia de web progressiva usa os processadores locais do runtime em vez de entupir a banda com downloads de mídia."
1. O peso dos arquivos de áudio
Apps web comuns buscam os arquivos de áudio por HTTP. Isso traz vários problemas de engenharia:
- Consumo de banda: baixar até efeitos sonoros simples acrescenta megabytes ao carregamento inicial de um PWA.
- Latência e atrasos: buscar ou carregar o áudio cria um atraso perceptível entre o toque do jogador num botão e o som, e estraga a sensação tátil.
- Riscos de direitos autorais: hospedar clipes pré-gravados expõe os desenvolvedores a problemas de licenciamento.
2. Síntese de ondas por código
Em vez de arquivos, o Lingo Ladders usa a CPU para sintetizar ondas de frequência dentro do LingoAudioManager (libraries/audio-manager.js).
- Criamos OscillatorNodes e GainNodes locais para controlar as ondas de forma dinâmica.
- Por exemplo, o som de acerto é um arpejo rápido de dó maior com quatro tons senoidais puros:
- C5 (523,25 Hz) → E5 (659,25 Hz) → G5 (783,99 Hz) → C6 (1046,50 Hz).
- Cada frequência tem uma curva de ganho exponencial precisa para evitar estalos, o que resulta num toque retrô quente, limpo e natural.
3. Vibrato por modulação FM
Na fanfarra de vitória, fomos um passo além. Criamos um oscilador modulador independente de baixa frequência (a 5,5 Hz) e ligamos sua saída direto nas entradas de frequência das notas principais do sintetizador.
Isso cria em tempo real um vibrato com cara de analógico, que encorpa o acorde final e dá uma comemoração retrô rica e gratificante que custa exatamente zero bytes em downloads!