piano

Omi Piano is a web piano application built with the Omi framework and Omi Snippets. It combines 7 number keys, 5 letter keys, and the four modifier keys Shift, Control, Option, and Command to produce 60 piano notes (35 whole tones and 25 semitones), covering a range from double bass to double treble. The project provides a complete development and installation workflow. You can install the omi-piano package via npm, or clone the repository and run npm start to launch it locally. The interface uses flex layout and CSS shadows to draw black and white keys. Clicking a key or pressing the corresponding keyboard key plays the note, accompanied by a key highlight animation. The app includes two built-in scores, "A Dandelion's Promise" and "The Moon Represents My Heart," with auto-play support. The auto-play logic uses recursion and Promises to control the pause time between notes, while synchronously highlighting the note display at the bottom during playback. The project also explains the mapping between numbered musical notation and keyboard keys, as well as how to write custom scores. Technically, the project does not use mainstream frameworks such as React, Vue, or Angular. Instead, it adopts Omi's JSX and Web Components approach, combined with the Omil single-file component loader and a Proxy-based component communication mechanism. Audio playback is based on the HTML5 audio tag, with nodes obtained through refs to control playback progress. This project is suitable for developers interested in front-end componentization, keyboard event handling, and audio playback as a learning reference, and also works as a simple web piano tool for music enthusiasts.