マウスで鍵盤を弾く

今度はマウスで画面上の鍵盤をクリックして音程を鳴らしましょう。サンプルなのでまだ少ない鍵盤ですが。下記のリンクを右クリックして別ウインドウで開いてください。

サンプル3（マウスで弾ける鍵盤）

まずは小さな鍵盤をクリックしてみてください。ド、レ、ミと音程が鳴ってくれるはずです。前回つくった音色セレクタでサウンドを変えて鳴らすこともできます。

ソースを見ていきましょう。まずはcssで鍵盤を描画するための各種設定が追加されています。白鍵用、黒鍵用で数が多いですが、ここで詳細を設定しているので、htmlの記述はかなりシンプルになっています。

id=pianoupperのdivに鍵盤のすべてが収まっています。鍵盤数が増えてもこの中のspanを増やすだけで済むので増設も簡単です。

var key; 以降がマウス演奏の部分です。上がマウスダウン時、下がマウスアップ時の動作で、idが数値であるエレメントをクリックしたときに演奏処理を行い、そのエレメントにclassNameとして「on」をつけ、cssでハイライト表示させるという流れです。

最後のwindow.onloadの記述は、初回の発音に少し時間がかかるので、読み込み時にノートオフを１回実行させることでスタンバイ完了させてしまう工夫です。

これでマウスクリックによる演奏ができるようになりました。