piano

Omi Piano es una aplicación de piano web construida con el framework Omi y Omi Snippets. Utiliza 7 teclas numéricas, 5 teclas de letras y las cuatro teclas de función Shift, Control, Option y Command del teclado para combinar 60 notas de piano individuales (35 notas naturales y 25 semitonos), cubriendo un rango desde el contrabajo hasta el sobreagudo. El proyecto proporciona un flujo completo de desarrollo e instalación. Se puede instalar el paquete omi-piano mediante npm, o clonar el repositorio y ejecutar npm start para iniciarlo localmente. La interfaz utiliza diseño flex y sombras CSS para dibujar las teclas blancas y negras del piano. Al hacer clic en una tecla o presionar la tecla correspondiente del teclado, se reproduce la nota, acompañada de una animación de resaltado de la tecla. La aplicación incluye dos partituras integradas: "La promesa de la flor de diente de león" y "La luna representa mi corazón", con soporte de reproducción automática. La lógica de reproducción automática controla los tiempos de pausa entre notas mediante recursión y Promises, y sincroniza el resaltado de la visualización de notas en la parte inferior durante la reproducción. El proyecto también presenta la relación de mapeo entre la notación simplificada y las teclas del teclado, así como la forma de escribir partituras personalizadas. En cuanto a la implementación técnica, el proyecto no utiliza frameworks convencionales como React, Vue o Angular, sino que adopta el enfoque de JSX y Web Components de Omi, combinado con el cargador de componentes de archivo único Omil y un mecanismo de comunicación entre componentes basado en Proxy. La reproducción de audio se basa en la etiqueta audio de HTML5, obteniendo el nodo mediante ref y controlando el progreso de reproducción. Este proyecto es adecuado para desarrolladores interesados en aprender sobre componentización frontend, manejo de eventos de teclado y reproducción de audio, y también sirve como una herramienta sencilla de piano web para aficionados a la música.