Música sem arquivos: como sintetizamos sons em jogos de navegador

Quando uma linha some no Prisma e toca um arpejo brilhante, ou quando três joias desaparecem em Joias Mágicas com um som de sino, nenhum arquivo de áudio foi baixado para isso. Esses sons são criados na hora, por código, dentro do próprio navegador. Parece mágica, mas é física e um pouco de matemática. Neste artigo, explicamos como funciona, com exemplos tirados dos nossos jogos, e mostramos um jeito de brincar com isso em casa.

Primeiro, o que é um som?

Som é vibração. Quando uma corda de violão vibra, ela empurra o ar para frente e para trás muitas vezes por segundo, e essas ondas de pressão chegam ao nosso ouvido. O número de vibrações por segundo é a frequência, medida em hertz (Hz). Quanto maior a frequência, mais agudo o som. O ouvido humano costuma perceber, aproximadamente, de 20 Hz a 20.000 Hz.

Na música, existe uma referência combinada: a nota Lá acima do Dó central, que os músicos chamam de Lá 440, vibra a 440 Hz. É por ela que muitas orquestras e afinadores eletrônicos se guiam.

O oscilador: uma fábrica de ondas

Um oscilador é algo que gera uma vibração repetida. Nos sintetizadores, ele produz uma onda numa frequência escolhida. O formato dessa onda muda o timbre, aquilo que faz uma flauta e um trompete soarem diferentes tocando a mesma nota:

• Senoidal (sine): som puro e suave, parecido com um assobio.
• Triangular (triangle): parecida com a senoidal, mas um pouco mais encorpada.
• Quadrada (square): o som clássico dos videogames antigos, meio "zumbido".
• Dente de serra (sawtooth): áspera e cheia de harmônicos, ótima para efeitos de raio ou de motor.

Os videogames dos anos 1980 dependiam quase só disso. O console de mesa da Nintendo daquela época, por exemplo, tinha um chip de som com poucos canais: duas ondas quadradas, uma triangular, um gerador de ruído e um canal para pequenos trechos gravados. Toda a música dos jogos da época nascia dessa combinação.

A Web Audio API: um estúdio dentro do navegador

Os navegadores modernos trazem uma ferramenta chamada Web Audio API, que virou recomendação oficial do W3C, o consórcio que cuida dos padrões da web, em 2021. Com ela, o código monta uma espécie de estúdio virtual, ligando peças como se fossem cabos e pedais de guitarra:

1. um oscilador gera a onda;
2. um controle de ganho ajusta o volume;
3. um filtro corta os agudos ou os graves, deixando o som mais abafado ou mais brilhante;
4. um compressor segura os picos de volume para nada estourar;
5. e, no fim da corrente, o som sai pelo alto-falante.

Em Joias Mágicas, os efeitos e a música passam por "trilhos" separados, um para cada tipo. Por isso dá para ajustar o volume da música sem mexer no volume dos efeitos, e vice-versa. O Prisma faz o mesmo, com controles separados para efeitos sonoros e música.

O envelope: dar forma ao som

Se um oscilador simplesmente liga e desliga, o som estala, como um clique feio no alto-falante. Para soar bem, o volume precisa subir e descer de forma suave. Esse desenho do volume ao longo do tempo se chama envelope.

Um efeito curto, como o de mover uma peça, sobe em poucos milésimos de segundo e some quase na mesma hora. Uma nota de música pode subir com mais calma e desaparecer devagar. No Prisma, cada nota sobe até o volume certo em cerca de 8 milésimos de segundo e depois cai suavemente até o silêncio. É tão rápido que parece instantâneo, mas é o bastante para evitar o estalo.

De frequências a notas

Como transformar números em música? Na escala usada no piano, cada passo de meio tom multiplica a frequência por cerca de 1,0595, que é a raiz décima segunda de 2. Doze desses passos formam uma oitava, e a frequência dobra: o Lá 440 vira Lá 880 uma oitava acima. Sabendo a frequência de uma nota de partida, o código calcula qualquer outra com uma conta simples.

Uma melodia, então, vira uma lista de números: quantos meios tons acima da nota base, e quando tocar cada um. A música de fundo do Prisma é exatamente isso, uma sequência de dezesseis notas em arpejo, tocada repetidamente sobre uma nota grave, com uma pequena mudança de tom conforme a fase.

Efeitos são melodias minúsculas

Muita gente imagina que cada efeito sonoro precisa de uma gravação. Nos nossos jogos, a maioria deles é só uma pequena sequência de notas bem escolhidas:

• Limpar linhas no Prisma toca um arpejo subindo. E quanto mais linhas somem de uma vez, mais notas o arpejo tem. O ouvido entende que a jogada foi melhor antes mesmo de você olhar os pontos.
• Girar a peça no Prisma toca duas notas curtas, uma logo depois da outra, num intervalo agradável.
• Fim de partida no Prisma é o contrário da vitória: quatro notas descendo, num som mais suave.
• Combinações em Joias Mágicas sobem na escala a cada nova onda de uma reação em cadeia. A primeira cascata soa mais grave, e as seguintes, cada vez mais agudas.

Sinos, ruído e eco feitos de matemática

Joias Mágicas vai um pouco além. O som cintilante das joias é feito somando várias ondas senoidais de uma vez, em frequências que não são múltiplas exatas umas das outras. É essa mistura "desencontrada" que dá ao som o jeito de sino ou de vidro, e não de flauta.

O som de troca, aquele "fffuu" rápido, vem de ruído: uma sequência de valores aleatórios, parecida com o chiado de uma TV fora do ar, passada por um filtro que deixa só uma faixa de frequências. E até o eco que deixa tudo mais espaçoso é calculado: o jogo cria uma reverberação artificial a partir de ruído que vai sumindo aos poucos, como o som se apagando numa sala grande.

Música que muda com a partida

A música de Joias Mágicas não é uma faixa gravada que se repete igualzinha. Ela é gerativa: o código segue uma sequência de acordes e, a cada compasso, escolhe um desenho diferente para o arpejo, às vezes pula notas e às vezes acrescenta notas de sino agudas. As notas vêm da escala pentatônica, de cinco notas, que soa agradável em quase qualquer combinação. Por isso a música varia sem desafinar.

Ela também reage ao jogo. Cada mundo tem o seu clima, com sequência de acordes e andamento próprios. E, quando você faz uma boa cadeia, a música ganha um pouco mais de intensidade, que depois volta a acalmar. É uma trilha que acompanha o que está acontecendo.

Como o código toca no tempo certo

Existe um desafio escondido: o código do jogo não roda num ritmo perfeitamente regular, porque o navegador também está desenhando a tela, lendo o toque e fazendo outras coisas. Se cada nota fosse tocada "agora", algumas atrasariam e a música ficaria tropeçando.

A solução é agendar com antecedência. A Web Audio API tem um relógio próprio, muito preciso. Em vez de tocar a nota no momento exato, o código acorda várias vezes por segundo, olha um pedacinho do futuro e marca no relógio de áudio as notas que devem tocar ali. Assim, mesmo que o jogo dê uma engasgada, as notas já estão marcadas e saem no tempo certo.

Por que sintetizar, e não gravar?

• Carregamento leve: sem arquivos de áudio, o jogo abre mais depressa, o que faz diferença numa internet de celular.
• Ajuste fácil: mudar o volume, o tom ou o andamento é trocar um número.
• Variação: dá para mudar um pouco o som a cada vez, para ele não ficar repetitivo.

Por que o navegador pede um toque primeiro?

Os navegadores só liberam o som depois que a pessoa interage com a página, com um toque, um clique ou uma tecla. É uma regra para proteger você de páginas que começariam a tocar barulho sozinhas. Por isso, às vezes o jogo só faz som depois que você toca em "Jogar". Joias Mágicas e o Prisma também calam a música quando você troca de aba ou sai do aplicativo; o Prisma, inclusive, pausa a partida sozinho nessa hora.

Experimente em casa

Um teste simples para fazer em família: abra o Prisma, limpe uma linha, depois tente limpar duas ou mais de uma vez e preste atenção no som. Quantas notas você consegue contar em cada caso? Depois, entre nas configurações e mexa nos volumes de música e de efeitos: você está mudando números que controlam esses osciladores. E se ficou curioso sobre as outras peças que fazem um jogo rodar sem instalar nada, leia como um jogo roda no navegador.