piano

Omi Piano é uma aplicação de piano web construída com o framework Omi e Omi Snippets. Através de 7 teclas numéricas, 5 teclas de letras e quatro teclas de função — Shift, Control, Option e Command — do teclado, ela combina 60 notas de piano (35 tons inteiros e 25 semitons), cobrindo a extensão desde o contrabaixo até o superagudo. O projeto oferece um fluxo completo de desenvolvimento e instalação. É possível instalar o pacote omi-piano via npm, ou clonar o repositório e executar npm start para iniciar localmente. A interface usa layout flex e sombras CSS para desenhar as teclas pretas e brancas. Ao clicar nas teclas ou pressionar as teclas correspondentes do teclado, as notas são reproduzidas, acompanhadas de uma animação de destaque das teclas. A aplicação inclui duas partituras integradas — "A Promessa do Dente-de-leão" e "A Lua Representa o Meu Coração" — com suporte à reprodução automática. A lógica de reprodução automática controla os intervalos entre as notas por meio de recursão e Promise, sincronizando simultaneamente o destaque das notas exibidas na parte inferior durante a reprodução. O projeto também apresenta o mapeamento entre a notação simplificada e as teclas do teclado, além de como escrever partituras personalizadas. Na implementação técnica, o projeto não utiliza frameworks convencionais como React, Vue ou Angular, mas adota a solução JSX e Web Components do Omi, combinada com o carregador de componentes de arquivo único Omil e o mecanismo de comunicação entre componentes baseado em Proxy. A reprodução de áudio é baseada na tag audio do HTML5, obtendo os nós por meio de ref e controlando o progresso da reprodução. Este projeto é adequado para desenvolvedores interessados em componentização front-end, tratamento de eventos de teclado e reprodução de áudio como referência de estudo, e também para entusiastas de música como uma ferramenta simples de piano web.