Quando concebemos o feedback sonoro do Lingo Ladders, tivemos uma escolha importante pela frente: descarregar ficheiros de áudio pesados (MP3/WAV) pela rede ou sintetizar os sons em tempo real, através de código?
Para oferecer uma experiência 100% livre de royalties, privada e sem latência, criámos um motor de síntese de áudio com a Web Audio API nativa do HTML5. Este artigo mostra como funcionam os sons retro do Lingo Ladders.
"A boa engenharia web progressiva usa os processadores locais do runtime em vez de entupir a largura de banda com transferências de multimédia."
1. O peso dos ficheiros de áudio
As aplicações web comuns vão buscar os ficheiros de áudio por HTTP. Isso traz vários problemas de engenharia:
- Consumo de largura de banda: descarregar até efeitos sonoros simples acrescenta megabytes ao carregamento inicial de uma PWA.
- Latência e atrasos: ir buscar ou carregar o áudio cria um atraso percetível entre o toque do jogador num botão e o som, o que estraga a sensação tátil.
- Riscos de direitos de autor: alojar clipes pré-gravados expõe os programadores a problemas de licenciamento.
2. Síntese de ondas por código
Em vez de ficheiros, o Lingo Ladders usa o 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 sinusoidais 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 estalidos, o que resulta num toque retro quente, limpo e natural.
3. Vibrato por modulação FM
Na fanfarra de vitória, fomos mais longe. Criámos um oscilador modulador independente de baixa frequência (a 5,5 Hz) e ligámos a sua saída diretamente às entradas de frequência das notas principais do sintetizador.
Isto cria em tempo real um vibrato com ar analógico, que encorpa o acorde final e dá uma celebração retro rica e gratificante que custa exatamente zero bytes em transferências!