Об этом проекте

Omi Piano — это веб-приложение пианино, созданное с использованием фреймворка Omi и Omi Snippets. С помощью 7 цифровых клавиш, 5 буквенных клавиш и четырёх функциональных клавиш Shift, Control, Option и Command оно формирует 60 отдельных фортепианных нот (35 целых тонов и 25 полутонов), охватывая диапазон от субконтроктавы до дважды контроктавы. Проект предоставляет полный процесс разработки и установки: пакет omi-piano можно установить через npm либо клонировать репозиторий и запустить npm start для локального запуска. Интерфейс использует flex-раскладку и CSS-тени для отрисовки чёрных и белых клавиш. При нажатии на клавишу или соответствующую клавишу клавиатуры воспроизводится нота с анимацией подсветки клавиши. В приложение встроены две партитуры — «Одуванчики» и «Луна представляет моё сердце» — с поддержкой автоматического воспроизведения. Логика автовоспроизведения управляет паузами между нотами с помощью рекурсии и Promise, синхронно подсвечивая отображаемые ноты в нижней части экрана. В проекте также описано соответствие между цифровой нотацией и клавишами клавиатуры, а также способы создания собственных партитур. С технической точки зрения проект не использует такие популярные фреймворки, как React, Vue или Angular. Вместо этого применяются JSX и Web Components от Omi в сочетании с загрузчиком однофайловых компонентов Omil и механизмом взаимодействия компонентов на основе Proxy. Воспроизведение звука основано на HTML5-теге audio: узел получается через ref, а прогресс воспроизведения контролируется программно. Проект подходит разработчикам, интересующимся компонентным подходом во фронтенде, обработкой событий клавиатуры и воспроизведением звука, а также любителям музыки как простой инструмент веб-пианино.