piano

Omi Pianoは、OmiフレームワークとOmi Snippetsを使用して構築されたWebピアノアプリです。キーボードの7つの数字キー、5つのアルファベットキー、そしてShift、Control、Option、Commandの4つのファンクションキーを組み合わせて、60のピアノ単音（35の全音と25の半音）を演奏でき、倍低音から倍高音までの音域をカバーしています。 プロジェクトは完全な開発・インストール手順を提供しており、npmでomi-pianoパッケージをインストールするか、リポジトリをクローンしてnpm startを実行することでローカルで起動できます。インターフェースはflexレイアウトとCSSシャドウを使用して白鍵と黒鍵を描画し、鍵盤をクリックするか対応するキーボードキーを押すと音符が再生され、キーのハイライトアニメーションが表示されます。 アプリには「タンポポの約束」と「月が私の心を代表する」の2曲の楽譜が内蔵されており、自動再生に対応しています。自動再生ロジックは再帰とPromiseを使用して音符間の休止時間を制御し、再生中は下部の音符表示を同期してハイライトします。プロジェクトでは数字譜とキーボードキーの対応関係、およびカスタム楽譜の作成方法も紹介しています。 技術実装において、プロジェクトはReact、Vue、Angularなどの主流フレームワークを使用せず、OmiのJSXとWeb Componentsソリューションを採用し、Omil単一ファイルコンポーネントローダーとProxyベースのコンポーネント通信メカニズムを組み合わせています。オーディオ再生はHTML5のaudioタグに基づき、refを通じてノードを取得し再生進度を制御します。 このプロジェクトは、フロントエンドのコンポーネント化、キーボードイベント処理、オーディオ再生に興味のある開発者の学習参考に適しており、音楽愛好家がシンプルなWebピアノツールとして使用するのにも適しています。