piano

Omi Piano는 Omi 프레임워크와 Omi Snippets를 사용해 만든 웹 피아노 애플리케이션이다. 키보드의 숫자 키 7개, 알파벳 키 5개, 그리고 Shift, Control, Option, Command 네 가지 기능 키를 조합해 피아노 단음 60개(온음 35개, 반음 25개)를 연주할 수 있으며, 더블 베이스부터 더블 트레블까지의 음역을 커버한다. 프로젝트는 완전한 개발 및 설치 과정을 제공하며, npm으로 omi-piano 패키지를 설치하거나 저장소를 클론한 뒤 npm start를 실행해 로컬에서 시작할 수 있다. 인터페이스는 flex 레이아웃과 CSS 그림자를 사용해 흰 건반과 검은 건반을 그리며, 건반을 클릭하거나 해당 키보드 키를 누르면 음이 재생되고 키 하이라이트 애니메이션이 함께 표시된다. 앱에는 '민들레의 약속'과 '달이 내 마음을 대신하네' 두 곡의 악보가 내장되어 있으며 자동 재생을 지원한다. 자동 재생 로직은 재귀와 Promise를 통해 음표 사이의 정지 시간을 제어하고, 재생 중 하단의 음표 표시를 동기화하여 하이라이트한다. 프로젝트는 또한 숫자 악보와 키보드 키의 매핑 관계, 그리고 사용자 지정 악보를 작성하는 방법도 소개한다. 기술 구현 측면에서 이 프로젝트는 React, Vue, Angular 같은 주류 프레임워크를 사용하지 않고, Omi의 JSX와 Web Components 방식을 채택했으며, Omil 단일 파일 컴포넌트 로더와 Proxy 기반 컴포넌트 통신 메커니즘을 결합했다. 오디오 재생은 HTML5의 audio 태그를 기반으로 하며, ref를 통해 노드를 가져와 재생 진행을 제어한다. 이 프로젝트는 프런트엔드 컴포넌트화, 키보드 이벤트 처리, 오디오 재생에 관심 있는 개발자가 학습 참고용으로 사용하기에 적합하며, 음악 애호가가 간단한 웹 피아노 도구로 사용하기에도 적합하다.