Criar um piano digital no Gemini: sintetizador completo em um único HTML
Criar interfaces visuais é algo que as inteligências artificiais já dominam com certa tranquilidade. Mas o que acontece quando exigimos engenharia de som em tempo real, matemática de frequências acústicas e controle de polifonia sem usar nenhum arquivo de áudio externo?
Neste novo episódio da série “Desafiando a IA”, colocamos o Gemini Pro (em sua evolução Argon) contra a parede: a missão era programar um piano eletrônico e sintetizador virtual completo, condensando HTML, CSS e JavaScript puro em um único arquivo HTML.
A regra tradicional do nosso laboratório prevê até 3 prompts de alteração, mas o que aconteceu neste teste quebrou o nosso próprio protocolo: pela primeira vez, a IA entregou um instrumento musical impecável logo de cara.
O desafio da síntese sonora (Web Audio API):
Como não permitimos o uso de arquivos MP3 ou WAV externos, o JavaScript precisa gerar o som matematicamente no navegador usando osciladores (ondas senoidais, quadradas, dente de serra) e envelopes ADSR (Attack, Decay, Sustain, Release). Um erro mínimo no fechamento de um nó de áudio trava a aba do navegador em poucos segundos.
Neste estudo de caso: veja como um único mega prompt gerou o Synthetix Pro de primeira, analise a evolução brutal do modelo Gemini Argon e baixe o sintetizador para tocar direto no seu navegador.
Resposta curta:
Não precisamos nem usar os prompts de correção! A nova versão do Gemini Pro (Argon) evoluiu a um ponto assustador. Onde há poucos meses precisaríamos de 3 ou 4 rodadas apenas para consertar teclas mudas ou estalos no áudio, o modelo entregou de primeira um painel de estúdio completo com múltiplos timbres, gravador, metrônomo e polifonia real.
Índice
- O mega prompt único do piano eletrônico
- O veredito: a evolução do Gemini Argon e download
- Amanda aconselha: os segredos da Web Audio API
O mega prompt de engenharia do piano digital 📌
Abaixo está o comando exato utilizado para gerar a aplicação inteira de uma só vez. O texto foi completamente limpo de tags de formatação ocultas para que você possa copiar e testar no seu próprio terminal de IA sem erros.
🎹 Laboratório dev — O projeto Synthetix Pro
📸 Prompt único — A arquitetura do sintetizador polifônico
Este comando estabelece todas as diretrizes sonoras e visuais: exige síntese nativa via Web Audio API, polifonia para tocar acordes, controles de envelope (Attack/Release), gravador de melodias e modo de aprendizado.
Quero que você crie um piano musical eletrônico completo em um único arquivo HTML, para o projeto "Desafiando a IA".
A proposta é criar um instrumento virtual que realmente seja divertido de tocar e tenha recursos que façam a pessoa querer continuar explorando.
Não quero apenas uma interface desenhada com teclas. Quero um piano funcional, tocável pelo teclado do computador e pelo mouse/toque, com geração real de áudio no navegador.
1. REGRAS TÉCNICAS
Crie tudo em um único arquivo: HTML, CSS e JavaScript. Não use backend, instalação ou build.
Para gerar o som, utilize a Web Audio API. Não utilize arquivos de áudio externos como dependência obrigatória. Cada tecla deve produzir uma nota musical real.
Se o navegador exigir uma interação inicial para liberar o áudio, mostre uma mensagem simples explicando ao usuário que ele precisa clicar em "Ativar piano".
2. VISUAL DO PIANO E TECLADO MUSICAL
Quero uma interface bonita inspirada em sintetizadores e painéis de estúdio.
Crie pelo menos duas oitavas utilizáveis com teclas brancas e pretas, indicação visual da nota pressionada, display mostrando a nota tocada (ex: C4 — Dó, frequência aproximada), oitava atual, volume e timbre selecionado.
Exiba o nome das notas (C — Dó, D — Ré, etc.) e a tecla correspondente do computador (ex: A -> C, S -> D).
O usuário deve poder tocar clicando com o mouse, pressionando teclas do computador ou usando tela touch. Evite repetir a mesma nota acidentalmente quando o usuário segura uma tecla.
3. POLIFONIA E CUIDADO COM O ÁUDIO
O piano deve permitir tocar várias notas simultaneamente (acordes). Não implemente como um único oscilador global. Crie uma arquitetura de áudio que permita múltiplas notas simultâneas e implemente gerenciamento básico de vozes (noteOn e noteOff) para evitar acúmulo infinito de nós de áudio. Evite criar um AudioContext novo para cada nota.
4. TIMBRES E CONTROLES DE SOM
Adicione timbres selecionáveis simulados com osciladores, envelopes e filtros: Piano acústico, Piano elétrico, Órgão, Synth Lead, Synth Pad, Strings, 8-bit / Game e Bell.
Adicione controles deslizantes compreensíveis para: Volume, Attack, Release, Sustain, Reverb, Delay e Filtro. Ao alterar os controles, a mudança deve afetar o som produzido. Permita também alterar a oitava (Oitava - e Oitava +).
5. GRAVAÇÃO, METRÔNOMO E FERRAMENTAS MUSICAIS
- Gravação (REC / PLAY): registre as notas tocadas, o momento de início e a duração. Permita reproduzir, pausar, parar e apagar a gravação.
- Metrônomo: ativar/desativar, ajuste de 40 a 220 BPM e volume, com destaque visual no primeiro tempo do compasso.
- Acordes rápidos: botões para tocar C, D, E, F, G, A, Am, Em, Dm simultaneamente, mostrando as notas que formam o acorde.
- Escalas: ferramenta para destacar no piano as escalas de C maior, G maior, D maior, A menor e E menor, permitindo tocá-las automaticamente.
- Modo aprendizado: sugira sequências simples de notas (ex: C — D — E — E — D — C), destacando quando o usuário acertar.
6. TEMAS, SALVAMENTO E DETALHES EXTRAS
Crie três temas visuais imediatos: Studio (escuro e elegante), Neon (futurista) e Classic (tradicional).
Use localStorage para salvar tema, timbre, volume, oitava, configurações e a última gravação.
Inclua contador de notas tocadas na sessão, botão "Silenciar", modo "Palco" (quase tela cheia) e uma tela de introdução curta ("Seu piano está pronto"). Garanta responsividade em desktop e celular.
Entregue o HTML completo e funcional.O que aconteceu no teste (Sucesso de primeira!): Foi um verdadeiro golaço logo na primeira tentativa. A evolução do Gemini Pro (versão Argon) mostrou uma maturidade impressionante: o visual de estúdio escuro ficou lindo, as teclas respondem sem atraso no teclado do computador e os diferentes timbres realmente mudam a onda sonora. Onde antes gastaríamos outros 2 ou 3 prompts corrigindo bugs de áudio, aqui o projeto já nasceu pronto.
👉 Clique na imagem para ampliar. O Synthetix Pro nasceu completo logo no primeiro prompt, com controles de envelope, acordes e múltiplos timbres.
O veredito: a evolução do Gemini Argon e download 🎹
Este experimento provou na prática o quanto os modelos de linguagem voltados para código evoluíram nos últimos meses. O Gemini Pro (Argon) não apenas desenhou um teclado bonito, mas resolveu problemas complexos de engenharia de áudio — como polifonia limpa, envelopes de ataque/repouso e gravação baseada em timestamps — sem precisar de nenhuma rodada de correção.
Para quem quiser expandir o projeto no futuro, o caminho agora é apenas adicionar perfumarias de uso diário, como criação de perfis de usuário, salvamento de múltiplos presets personalizados de som ou novos layouts de teclado. A base musical já está impecável.
SYNTHETIX PRO: O código final
Quer tocar no sintetizador agora mesmo, testar o gravador de melodias ou estudar como a Web Audio API foi programada? Baixe o arquivo HTML gerado no laboratório.
👉 Amanda aconselha: os segredos da Web Audio API
- O bloqueio de áudio dos navegadores: Navegadores modernos (como Chrome e Safari) bloqueiam qualquer som automático até que o usuário clique em algum lugar da página. Pedir no prompt um botão inicial de “Ativar piano” foi essencial para instanciar o
AudioContextsem gerar erros silenciosos no console. - Por que exigir polifonia explícita: Se você pedir apenas “um piano em HTML”, muitas IAs criam um único oscilador global. Isso faz com que, ao tocar duas teclas juntas, a segunda corte o som da primeira. Exigir gerenciamento de vozes (
noteOnenoteOffindependentes) garante que você consiga tocar acordes reais. - Cuidado com o evento de tecla pressionada: No computador, quando seguramos uma tecla no teclado, o sistema operacional dispara o evento
keydowndezenas de vezes por segundo. Incluir no prompt a regra para “evitar repetir a mesma nota acidentalmente quando o usuário segura a tecla” impediu aquele efeito metralhadora irritante no som.
ps: muito obrigada por me acompanhar nesta leitura. Valorizo imensamente a sua presença por aqui.
